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)

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第1张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第2张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第3张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第4张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第5张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第6张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第7张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第8张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第9张图片

1.2、配置必要目录

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第10张图片

以管理员的身份打开终端,输入如下两个命令(文件目录就是刚刚创建的两个文件目录):

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第11张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第12张图片

1.3、配置环境变量

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第13张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第14张图片

变量名:NODE_PATH

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第15张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第16张图片

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第17张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第18张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第19张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第20张图片

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

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

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第21张图片

1.5、安装淘宝镜像

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

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

 检查是否配置成功

npm config get registry

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第22张图片

 

1.5、cnpm 安装(推荐安装)

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

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

以下是下载 cnpm 指令:

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第23张图片

查看是否安装成功:

cnpm -v

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第24张图片

二、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,就会自动跳出页面

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第25张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第26张图片

b)创建项目

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第27张图片

c)选择手动创建项目

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第28张图片

d)选择插件(自己根据情况选择)

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第29张图片Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第30张图片

e)配置项目

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第31张图片

f)创建成功

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第32张图片

g)建议安装,方便浏览器调试

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第33张图片

2.4、启动项目

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第34张图片

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

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第35张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第36张图片

c)成功

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第37张图片

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程_第38张图片

你可能感兴趣的:(Vue,vue.js,ui,前端)