如何配置 vue + webpack + vue-cli 环境

第一步安装Node.js

检查系统是否安装Node.js 指令：node -v 如果有版本号就是安装成功，没有安装的请去Node.js官网下载

第二步通过npm安装nrm来切换下载源

为什么要换,你懂的!

输入全局安装指令 npm install -g nrm

查看当前支持切换的源 nrm ls

切换指定的源taobao nrm use taobao

第三步npm安装yarn资源管理工具

Yarn

是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样，它的目的是解决这些团队使用 npm 面临的少数问题，即：

安装的时候无法保证速度/一致性

安全问题，因为 npm 安装时允许运行代码

输入全局安装指令 npm install -g yarn

安装成功即可查看版本 yarn -v

第四步npm安装webpack

webpack官网

输入全局安装指令 npm install --global webpack

第五步yarn安装vue-cli脚手架

为什么要用vue-cli? vue-cli用于自动生成vue.js模板工程

输入全局安装指令 yarn global add vue-cli

安装完毕后可执行命令 yarn vue来查看vue指令，这里有个bug可能会显示找不到指令，直接输入vue

第六步初始化vue项目

使用yarn init指令初始化项目vue init <template-name> <my-project>

<template-name>表示模板名称，vue-cli官方为我们提供了5种模板

使用指令vue list来查看5个模板名字和描述

1.<webpack>一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展

2.<webpack-simple>一个简单webpack + vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境

3.<browserify>一个全面的Browserify + vueify 的模板，功能包括热加载，linting,单元检测

4.<browserify-simple>一个简单Browserify + vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境

5.<simple>一个最简单的单页应用模板

实际开发中建议使用<webpack>模板

使用指令vue init webpack <my-project>

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

Project name: 项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写

Project description: 项目描述，默认为A Vue.js project

Author: 作者，如果你有配置git的作者，他会读取

Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha

Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试

安装好了以后进入my-project目录里面指令cd my-project

安装项目依赖包执行指令yarn

Hello Vue

Vue-cli 项目目录解析

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- assets                       // 资源目录 
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                         // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|   |-- .postcssrc.js                // 通过JS插件装换样式的工具 
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息