Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程

目录

前言提示

一、安装 & 配置 nodejs

1.1、安装 nodejs

1.2、配置必要目录

1.3、配置环境变量

1.4、测试 安装&配置 是否成功

1.5、安装淘宝镜像

1.5、cnpm 安装（推荐安装）

二、vue-cli3 创建项目

2.1、vue-cli2 和 vue-cli3 主要区别

2.2、安装 vue-cli3

2.3、创建 vue-cli3 脚手架

2.4、启动项目

---

前言提示

---

以下过程凡是涉及到终端的使用，一定都要使用 管理员 方式打开！ 

一、安装 & 配置 nodejs

---

1.1、安装 nodejs

官网下载地址：Node.js — Download (nodejs.org)

1.2、配置必要目录

以管理员的身份打开终端，输入如下两个命令（文件目录就是刚刚创建的两个文件目录）：

npm config set prefix "D:\compiler\nodejs\node_global"

npm config set cache "D:\compiler\nodejs\node_cache"

Ps：注意和命令的对应关系 prefix -> node_global 、 cache -> node_cache

1.3、配置环境变量

变量名：NODE_PATH

变量值：D:\compiler\nodejs\node_global\node_modules

将默认的 C 盘下 AppData\Roaming\npm  修改成  node_global 的路径，点击确定

1.4、测试 安装&配置 是否成功

全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

1.5、安装淘宝镜像

npm 默认使用国外镜像，下载速度比较慢.  可以通过配置 淘宝 镜像来解决.

npm config set registry https://registry.npm.taobao.org

 检查是否配置成功

npm config get registry

 

1.5、cnpm 安装（推荐安装）

cnpm是个中国版的npm，是淘宝定制的. 

如果将来使用 npm install 下载速度慢，就可以使用 cnpm install 来代替.

以下是下载 cnpm 指令：

npm install -g cnpm --registry=https://registry.npmmirror.com

查看是否安装成功：

cnpm -v

二、vue-cli3 创建项目

---

2.1、vue-cli2 和 vue-cli3 主要区别

cli2个性化强一些，可以更友好的配置webpack.

cli3通用性强一些，达到真正的开箱即用，几乎零配置，已经将最适合开发的配置打包封装，并且支持 ui 界面创建项目. 

当然cli3也提供了定制化功能。个人建议尽量使用cli3，毕竟是新项目用最新，最前沿技术.

vue-cli2 项目目录如下：

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack 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                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                      // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

vue-cli3 项目目录如下：

|-- src                            // 源码目录
|  |-- components                  // vue公共组件
|  |-- router                      // vue的路由管理
|  |-- App.vue                     // 页面入口文件
|  |-- main.js                     // 程序入口文件，加载各种公共组件
|-- public                         // 静态文件，比如一些图片，json数据等
|  |-- favicon.ico                 // 图标文件
|  |-- index.html                  // 入口页面
|-- vue.config.js                  // 是一个可选的配置文件，包含了大部分的vue项目配置
|-- .babelrc                       // ES6语法编译配置
|-- .editorconfig                  // 定义代码格式
|-- .gitignore                     // git上传需要忽略的文件格式
|-- .postcsssrc                    // postcss配置文件
|-- README.md                      // 项目说明
|-- package.json                  // 项目基本信息,包依赖信息等

 

2.2、安装 vue-cli3

a）安装 vue-cli3 命令如下

npm install -g @vue/cli

b）打开 C:\Users\陈亦康\.vuerc 文件，保证 useTaobaoRegistry 的值为 true.（使用淘宝镜像）

{
  "useTaobaoRegistry": true,
  "packageManager": "npm"
}

2.3、创建 vue-cli3 脚手架

有以下两种方式创建：

• 命令行创建：vue create demo，启动项目使用 npm run serve
• UI 界面创建（推荐）：vue ui

这里主要讲的就是 UI 界面创建：

a）在命令行中输入 vue ui，就会自动跳出页面

b）创建项目

c）选择手动创建项目

d）选择插件（自己根据情况选择）

e）配置项目

f）创建成功

g）建议安装，方便浏览器调试

2.4、启动项目

a）可以在命令行中输入 npm run serve，也可以直接使用 vue ui 运行项目（打包编译都可以在任务中完成哦），如下

b）运行成功后，可以看到各项监控指标

c）成功