使用Vue-cli脚手架

 

使用vue-cli脚手架开发vue项目，有以下好处：

　　（1）成熟的Vue项目架构设计。

　　（2）本地测试服务器（热更新）。

　　（3）集成打包上线方案。

Vue-cli系统要求：

　　Node.js（>=4.x）

　　Git

　　一个能使用node命令行的终端

基本使用步骤（基于Windows7的命令行工具）：

　　（1）打开cmd命令行，定位到指定目录。

　　　　

 

　　（2）安装vue-cli包：

　　　　cnpm install vue-cli

　　　　

　　　　安装完毕之后可以通过指令“vue -V”查看vue-cli的版本号：

　　　　

 

　　（3）初始化项目：

　　　　安装完vue-cli包之后可以通过输入vue -h查看所有指令及用法：

　　　　

　　　　可以看到指令其实比较有限，用法其实并不复杂。

　　　　通过指令“vue list”可以查看官方提供的可供使用的模板：

　　　　

　　　　这里以使用webpack作为模板为例。

　　　　使用vue init指令初始化项目：

　　　　　　vue init webpack project-name

　　　　之后会询问一堆关于创建项目的问题：

　　　　

　　　　然后会提示你项目已经生成，以及如何开始：

　　　　

　　　　接下来第一步要把目录切换到生成的项目文件夹下面：

　　　　　　cd temp

　　　　

 

　　（4）安装项目依赖

　　　　开始项目之前一定要记得安装项目依赖，如果不安装项目依赖就启动测试服务器，会导致报错。

　　　　　　cnpm install

　　　　这里需要安装许多依赖模板，所以需要耐心等待，具体依赖哪些木块可以在package.json配置文件里查看。

　　　　

　　　　安装完毕后会提示所有包都已经安装完成，接下来就可以启动测试服务器了。

　　（5）在localhost启动测试服务器

　　　　npm run dev

　　　　

　　　　注意这里如果启动失败提示npm或者cnpm版本太低，需要先升级npm或者cnpm。

　　　　启动成功之后的页面如下：

　　　　

　　　　如果提示启动失败，提示error：‘event’，一般则是服务器监听的8080端口被占用所导致。具体怎么KILL占用8080端口的程序请翻阅上一篇博客。

　　（6）生成上线（部署）目录

　　　　npm run build

　　　　

　　　　

　　　　这样就会在temp目录下生成一个dist文件夹，用于存放部署文件。

　　　　

对于这个开发目录，需要了解的是dist存放部署文件，src存放源文件（开发主要在src文件夹中进行），node_modules存放npm安装的依赖。

开发目录src文件夹中主要有一下文件或者文件夹：

　　　　

　　assets存放所引用的资源文件，components存放vue组件文件，router存放vue-router配置文件index.js，main.js是页面js文件入口，App.vue是页面根组件。