目录
前言提示
一、安装 & 配置 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 serveUI 界面创建（推荐）：vue ui
这里主要讲的就是 UI 界面创建：
a）在命令行中输入 vue ui，就会自动跳出页面
b）创建项目
c）选择手动创建项目
d）选择插件（自己根据情况选择）
e）配置项目
f）创建成功
g）建议安装，方便浏览器调试
2.4、启动项目
a）可以在命令行中输入 npm run serve，也可以直接使用 vue ui 运行项目（打包编译都可以在任务中完成哦），如下
b）运行成功后，可以看到各项监控指标
c）成功
精彩内容
发表评论