博客里的一些小示例都是在vue-cli的基础上构建的，为了方便学习，这里把vue-cli构建项目的方法说一下！怎样从零开始，构建一个简单的vue2.0项目！
这里首先说一下，vue-cli是什么？
vue-cli是官方提供的一个脚手架，个人感觉比较适合新手同学来学习vue！
<h3>1.首先，要安装node和npm</h3>
这里先不说这两的安装方法，可以自行到网上搜索一下，例子还是很多的；
<h3>2.开始了，这里说一下，因为npm install安装的太慢，如果你的网速还比较渣的话，那我只能对你说自求多福吧！</h3>
这里推荐使用淘宝镜像；一下是安装方法：打开命令行工具，输入：
npm install -g cnpm --registry= https://registry.npm.taobao.org
安装完成后，输入
cnpm -v
如果出现版本号，就说明安装成功了！
<h3>3.接下来，安装webpack</h3>
打开命令行工具输入：
npm install webpack -g
安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。
因为安装了淘宝的镜像，可以直接输入：
cnpm install webpack -g
<h3>4.接下来，安装vue-cli脚手架构建工具</h3>
安装vue-cli脚手架构建工具，打开命令行工具输入：
npm install vue-cli -g
安装完成之后输入 vue -V（注意这里是大写的“V”）,如果出现相应的版本号，则说明安装成功。
<h3>5.新建一个文件夹，放置你的项目</h3>
cd 目录路径，然后输入命令：
vue init webpack projectName //projectName是你的工程名称，可自行输入
接下来出现
>$ vue init webpack projectName --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 projectName
? Project name (projectName) ---------------------项目名称
? Project name projectName
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则，这里个人建议选no,血的教训
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) -------------------单元测试，可选可不选
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) -------------------单元测试，可选可不选
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "projectName".
<h3>6.启动项目</h3>
依次输入以下命令即可：
cd exprice //切换到你的工程目录
npm install //安装依赖，node-modules
npm run dev //运行项目
出现下图，你就成功了
网友评论