vue.js从安装到搭建过程详解


Posted in Javascript onMarch 17, 2017

最初的时候用vue是直接下载相关文件 按照以前的方法来操作的

后来发现安装好以后似乎用起来更便利,然后就开始琢磨着怎么搭起框架来,下面是过程:

安装

1、 安装nodejs

直接网上找下载就好

2、安装淘宝镜像

打开命令行 输入

npm install -g cnpm --registry= https://registry.npm.taobao.org

3、安装webpack

cnpm install webpack -g

4、在你想要新建项目的路径下新建文件夹 用于存放项目文件

cd 进入你的文件路径

vue init webpack-simple 工程名字(名字不能用中文)

后面会有一些默认的设置

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5、完成以后 就会发现 你的文件夹里已经有了所需的文件

vue.js从安装到搭建过程详解

6、安装npm 项目依赖 这一步会比较慢 因为文件很多

npm install

7、运行你的项目

npm run dev

到这里 你的基本安装以及搭建就算是完成了

下面就写一些我在项目里遇到的一些需要文件的引入

1、jQuery的导入

之前在和别人讨论的时候 他说vue不需要用jQuery 但是我们项目那边说要安装 所以我就安装了-_-
首先是命令行安装

npm install jquery --save

加入- -save 的意思就是保留到本地
然后再webpack.config.js 中
module.exports.plugins =中加入

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

还有再要引用的js中加入

import $ from 'jquery'
window.$=$

这样 jQuery就成功导入项目中了

2、静态css以及js导入

静态css 导入就是在相应的.vue文件中import
例如

@import './assets/css/global.css';

静态js在相应的js中require 还有这些js以及css要放在assets下面

require('./assets/js/global.js')

3、vue-resource 导入
还有elementui导入方法都是一样 这里就医vue-resource为例

npm install vue-resource --save

之后在需要导入的js中import还有use

import VueResource from 'vue-resource'
Vue.use(VueResource)

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
jquery实现聊天机器人
Feb 08 jQuery
超简单的Vue.js环境搭建教程
Mar 17 #Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
原生js编写2048小游戏
Mar 17 #Javascript
vue.js开发环境安装教程
Mar 17 #Javascript
jquery 手势密码插件
Mar 17 #Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 #Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
元旦文艺汇演主持词
2014/03/26 职场文书
大学生社会实践方案
2014/05/11 职场文书
个人授权委托书范本
2014/09/14 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
广播体操比赛主持词
2015/06/29 职场文书
交流会主持词
2015/07/02 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python