Vue CLI2快速搭建以及配置教程

前提说明

在开始之前，我认为您是了解Vue的（不精通没关系），对基础的前端技术（Javas、HTML、CSS等）是有一定基础的，我不建议一开始学前端技术就从框架开始，从最基础的开始吧，毕竟磨刀不误砍柴工嘛。

搭建之前的环境要求

1. Node环境 Cmd中敲 node -v 可以看到版本
2. npm环境（或者yarn，建议用npm）npm -v 可以看到版本
   我电脑上的截图如下：
   
   environment.png

搭建过程

1.安装Vue CLI，打开cmd窗口或者任何一个命令行窗口，运行如下命令

npm install -g @vue/cli    
cnpm install -g @vue/cli   //国内

npm由于国内的网络原因，一般会等待时间太长报错，最好用淘宝镜像cnpm来运行命令，如果没有安装cnpm，运行如下命令即可安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.检验安装是否正确：安装之后输入 vue -V (注意这里是-V是大写) 会显示版本，否则安装失败。

QQ截图20181101104024.png

失败的原因多半是由于node环境不合适引起的，网上找找解决办法，这里就没办法陈列所有情况了。

3.在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：

vue init webpack vvv

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

QQ截图20181101101350.png

Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

4.安装npm包：进入到项目的第一级目录( cd vvv)，打开cmd窗口，输入

cnpm install

QQ截图20181101092353.png

5.启动项目：

npm run dev

QQ截图20181101092714.png

浏览器输入服务地址（http://localhost:8080/#/），然后就可以看到本地跑起来的Vue。
如果想让网页在浏览器自动打开，则需要进行如下设置：

QQ截图20181101101759.png

到这里了，第一个Vue CLI2构建的vue程序就成功了，接下来就可以修改框架配置和结构，开始真正的vue组件化开发了，利用webpack可以解决很多问题，例如用命令行调试、打包等。

文件结构

在编辑器中打开该项目文件，其结构如下：

QQ截图20181101093944.png

|-- build   // 项目构建(webpack)相关代码
| |-- build.js  // 生产环境构建代码
| |-- check-version.js// 检查node、npm等版本
| |-- logo.png  // logo图片
| |-- utils.js  // 构建工具相关
| |-- vue-loader.conf.js// vue-loader配置
| |-- webpack.base.conf.js   // webpack基础配置
| |-- webpack.dev.conf.js// webpack开发环境配置
| |-- webpack.prod.conf.js   // webpack生产环境配置
|-- config   // 项目开发环境配置
| |-- dev.env.js  // 开发环境配置
| |-- index.js  // 项目主要配置(包括监听端口，打包路径等)
| |-- prod.env.js  // 生产环境配置
|-- src// 源码目录
| |-- assets   // 静态资源 
| |-- components  // vue公共组件
| |-- router   // vue路由
| |-- App.vue  // 页面入口文件
| |-- main.js  // 程序入口文件，加载各种公共组件
|-- static   // 静态文件，比如一些图片，json数据等
| |-- data   // 群聊分析得到的数据用于数据可视化
|-- .babelrc   // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore  // git上传需要忽略的文件格式
|-- .postcssrc.js // post-loader的插件配置文件
|-- index.html  // 入口页面
|-- package.json  // 项目基本信息
|-- package-lock.json// 锁定当前安装的包的依赖
|-- README.md  // 项目说明