【vue】搭建vue-cli脚手架（超详细攻略并附上具体操作截图）

在使用vue-cli之前，请确认你的电脑已经安装了 node，建议版本在 8.0.0 以上

1.安装 webpack-cli (这里我们确认已安装过node)

a.检查之前是否安装过：下面这个样子的肯定是没成功的，成功的话会出现对应的版本号

b.反正我先用使用 npm install webpack -g 命令安装一下：

c.再次测试，发现还没成功，提示需要安装 webpack-cli。因为webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g

d.再次测试，终于成功。

 

2.全局安装 vue-cli

a.在命令行中输入 npm install -g vue-cli

b.安装完成后，检验是否安装成功，输入 vue-V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。打开 node 的安装目录，也可以看到我们全局安装的 vue-cli

3.利用vue-cli创建项目

a.选一个风水宝地（文件夹），然后cd到里面，输入命令 vue init webpack vue-demo 创建项目

• ? Project name  输入项目名称
• ? Project description 输入项目描述
• ? Author 作者
• ? Vue build 打包方式，回车就好了
• ? Install vue-router?  选择  Y 使用 vue-router，输入 N 不使用
• ? Use ESLint to lint your code? 代码规范，推荐 N (这里我选了Y,没试过这个，安装下来玩玩..结果挺坑的，控制台一片提醒，格式非得由tab改成空格，下面附上禁用方法)
• ? Setup unit tests with Karma + Mocha? 单元测试，推荐 N
• ? Setup e2e tests with Nightwatch? E2E测试，N

b.创建成功

• 先执行 cd vue-demo 命令，进入到项目目录
• 再执行 cnpm install 命令来初始化项目并安装依赖（因为我有cnpm，所以我用cnpm了，可以尝试用npm install）

 

4.运行项目

a.执行cnpm run dev 命令或者 npm run dev 命令

b.在浏览器打开地址：http://localhost:8081

• 如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js的 post

• 如果没别被占用，则显示下面的页面

 

5.webpack 配置分析

从 package.json 可以看到 开发 和 生产 环境的入口。

• dev 就是开发环境的启动命令
• build 是生产打包环境的命令
• lint 是ESLint的检查命令 在 --ext 前加一个 --fix 可以自动修复不符合规范的代码

 

6.打包上线

运行 npm run build 命令，就可以进行打包工作了，打包完成后，会生成 dist 目录，项目上线时，把dist 目录下的文件放到服务器就可以了。