vue2.0大全

怎么用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    //运行项目

出现下图,你就成功了


上一篇下一篇

猜你喜欢

热点阅读