vue-cli3从入门到项目实战
作者：互联网
导引
1、为什么要使用vue-cli？
要从快速构建一个项目说起，当下潮流，构建一个项目，一般都会采用前后端分离的web架构。同时对前端搭建环境提出了更高的要求。
平台无关性、功能更齐全
占内存少、更高效
帮助我们写好Vue基础代码的工具，也是行内通用的工具
2、Vue是前端框架
只需要安装nodejs，不需要掌握其用法。
一、安装vue-cli
1、Nodejs安装
参考文档：https://www.cnblogs.com/matanzhang/p/11441693.html
设置node、npm环境变量
计算机->属性->高级系统设置->环境变量->系统变量->Path
设置全局模块缓存目录
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
加入环境变量。
2、常见的dos命令
使用脚手架会经常用到命令行操作
cd 打开文件夹
md创建新文件夹
dir 查看文件夹内容
cd .. 返回上一级文件夹
3、npm安装和参数设置
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cnpm：因为npm插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器
全局安装（global），可以在命令行下（-g）直接使用
可以通过npm root -g查看全局安装的文件夹未知
手动指定从哪个镜像服务器获取资源
npm install -gd --registry=http://registry.npm.taobao.org
为避免每次安装都需要--registry参数，可以使用如下命令进行永久设置
npm config set registry http://registry.npm.taobao.org
参数说明
-S，--save安装包信息将加入到Dependencies（生产阶段的依赖）
-D，--save--dev 安装包信息将加入到dev Dependencies（开发阶段的依赖），所以开发阶段一般使用它
i，是install的缩写（注意：前面没有“-”）
cnpm install -g cnpm --registry=http://registry.npm.taobao.org
4、vue-cli安装
npm install -g vue-cli
cnpm install -g vue-cli
验证vue版本："d:\Program Files\nodejs\node_global\vue" -V
如果前面没有设置环境变量的话，这里需要加入环境变量Path路径。
vue-cli家族成员：cli2、cli3
vue-cli全称Command-Line Interface：又称为命令行界面或字符用户界面。
二、创建vue项目
1、创建cli中部分配置内容说明
? Install vue-router? Yes 官方的路由，大多数情况使用这个
? Use ESLint to lint your code? N 统一代码风格，自己做开发的话，选择no。
2、创建vue-cli项目
注意，第一次创建项目很多包需要下载，耗时很久，早做准备。
D:\vuepro\testcli>vue init webpack test1
? Project name test1
? Project description A Vue.js pro
? Author
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch?
创建完成后，启动项目。
D:\vuepro\testcli>cd test1
D:\vuepro\testcli\test1>npm run dev
浏览器访问验证：http://localhost:8080/，无异常即ok。
标签：npm,node,vue,cli,--,入门,registry,cli3 来源： https://www.cnblogs.com/sunnyyangwang/p/15779677.html