手把手教你如何使用webpack搭建vue2.x的vue-cli脚手架

1、选择node版本和下载安装Node

node和npm版本对应表：https://nodejs.org/zh-cn/download/releases/https://nodejs.org/zh-cn/download/releases/
nodeJs到14.0.0就不支持win7系统了，只能选择之前的版本，比较新的是13.14.0版本。注意：13.14.0版本的node不能使用cnpm

首先前往nodejs官网下载nodejshttp://nodejs.cn/download/ 

 下载傻瓜式下一步安装，安装完成打开终端输入

1. node -v

2. npm -v   检查是否安装成功。

什么是npm和cnpm
npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） 
cnpm:因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

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

（注意：为了避免每次安装都需要--registry参数，可以使用如下命令）

进行永久设置：npm config set registry http://registry.npm.taobao.org

cnpm -v 检查是否安装完成。 

配置环境变量

在系统环境变量添加NODE_PATH,输入路径为： D:\node-v10.14.2-x64\node_global\node_modules
操作如下：我的电脑右击，打开属性->高级系统设置->环境变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：通过“浏览目录”输入上面路径，确定即可。 

 

注：使用NPM命令：

下载三方库：npm install vue --save (vue是库名称 --save是保存，这里的 横线 是2个 --save也可以简写成-S)
全局安装bower：npm install bower –g
使用bower info 可以查看库的版本：bower info vue
下载指定版本的库：npm install [email protected] (vue是库名称+@符号+版本号)

2、下载webpack npm install webpack –g

3、安装脚手架版本：2.x :npm install vue-cli -g   3.x :npm install -g vue/[email protected] 

4、根据模板创建项目

webpack推荐用他，也有其他模板（webpack-simple 、simple 完全没用，webpack-simple webpack 有校验，browserify-simple，browserify）

初始化：【vue init webpack 项目名称】   或者  【vue create 项目名称 】

前者webpack方式创建，后者cli方式。vue-cli 内部封装了 webpack,对外仅仅提供几个依赖。而且做了很多适合 vue 项目的优化，同时你可以用 vue.config.js 来管理项目。package.json 非常清爽
webpack 更符合针有特定需求，毕竟是原生。不过管理起来也更加复杂。不过社区有升级，可以第一时间获取升级优势。前一种只能等待 vue-cli 项目升级
一般来说，vue-cli 够用了，但是 vue-cli 能实现的，webpack 一定能实现，反之，不一定。

vue init webpack my-project

命令说明 ：vue init
project-name  是我们要初始化的项目名称
template-name 是表示模板名称，vue-cli官方为我们提供了5种模板，其中webpack是最常用的模板，一般我们开发项目都会用webpack进行开发，而vue官方也推荐我们使用webpack，建议大家学学webpack，还是一个比较有用的前端构建工具。
下面看看其他剩下的几种模板
    webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能。
    browserify：一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
    browserify-simple：一个简单Browserify+vueify的模板，不包含其他功能。
    simple：一个最简单的单页应用模板。
    $ vue init webpack my-project--- 这个是那个安装vue脚手架的命令
    This will install Vue 2.x version of the template. ---这里说明将要创建一个vue 2.x版本的项目
    For Vue 1.x use: vue init webpack#1.0 exprice
    ? Project name (exprice) ---项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
    ? Project name exprice
    ? Project description (A Vue.js project) ---项目描述，默认为A Vue.js project,直接回车，不用编写。
    ? Project description A Vue.js project
    ? Author Datura ---作者，如果你有配置git的作者，他会读取。
    ? Author Datura
    ? Vue build (Use arrow keys)
    ? Vue build standalone
    ? Install vue-router? (Y/n) ---是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? (Y/n) n ---是否用ESLint来限制你的代码错误和风格。
    ? Use ESLint to lint your code? No
    ? Setup unit tests with Karma + Mocha? (Y/n) ---是否需要安装单元测试工具Karma+Mocha。
    ? Setup unit tests with Karma + Mocha? Yes
    ? Setup e2e tests with Nightwatch? (Y/n) ---是否安装e2e来进行用户行为模拟测试。
    ? Setup e2e tests with Nightwatch? Yes
  ? Should we run npm install for you after the project has been created? (recommended) npm 这一步会询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，听说yarn更快更好，童鞋们可以试试，我建议大家使用yarn安装，使用yarn之前确保你的电脑已经安装yarn。以前老版本的vue-cli是没有这个选项的，老版本的vue-cli只是下载vue项目模板，下载完成后需要进入项目文件夹进行包依赖安装，现在vue-cli会帮你安装包依赖，只能说vue真的是越来越人性化了，怪不得这么多人使用vue进行开发。下面截个图
    vue-cli · Generated "exprice".
    To get started: --------------------- 这里说明如何启动这个服务
    cd  my-project
    npm run dev

5、cd 项目名称

6、npm install --安装模块（包）

7、npm audit fix –自动更新依赖

8、npm run dev  --运行项目

9、npm run build --发布项目

Vue-cli项目结构