怎么用vue-cli构建自己的vue2.0的项目
2017-06-06 本文已影响66人
殖民_FE
博客里的一些小示例都是在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 //运行项目
出现下图,你就成功了