一、开发环境的搭建
1.查看node安装版本信息(必须要安装node.js)
node -v
2.查看npm安装版本信息(必须要安装npm)
npm -v
3.可将npm版本更新到最新(如无必要更新到最新版,最好不要更新)
npm -g install npm
4.安装cnpm
由于资源的限制,安装npm依赖包的时候经常失败,建议使用npm的国内镜像cnpm 命令行工具代替默认的npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
5.最新稳定版 vue(可不执行安装)
cnpm install vue -g
6.安装webpack,打开命令行工具输入:
cnpm install webpack -g,
安装完成之后输入 webpack -v,
如果出现相应的版本号,则说明安装成功。
7.cpnm全局安装vue-cli
cnpm install --global vue-cli
安装完成后用vue -V查询版本号
二、构建项目
1.将vue项目建在某个盘的自己定义的文件夹下,利用命令进入此目录。
2.在此目录下创建一个基于 webpack 模板的新项目,即在cmd中输入以下命令:
vue init webpack 项目名称
或使用
vue init webpack-simple 项目名称
3.运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好,直到出现是否要安装vue-route,这个我们在项目要用到,所以就输入y 回车
需要注意的是项目的名称不能大写,不然会报错。
Project name (my-project) # 项目名称(我的项目)
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者(你的名字)
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
当然这些都看你自己个人的情况,我这里是全选了是。
此时会自动加载依赖包,非常慢,应用 ctrl+c 键进行退出,批量操作然后使用下列命令进行加载和启动
三、安装 vue 路由模块vue-router和网络请求模块vue-resource(此步骤请根据需要安装)
cnpm install vue-router vue-resource --save
cnpm install vuex --save
四、安装项目依赖
一定要从官方仓库安装,npm 服务器在国外所以这一步安装速度会很慢。
npm install(较慢) (cnpm install)(较快)
五、启动项目
npm run dev(较慢) (cnpm run dev)(较快)