vue-cli3创建vue项目

1、安装node环境

1. 官网下载 csdn下载

2. 选择LTS稳定版本，双击下一步傻瓜式安装。

3. 此时进入cmd命令行执行 node -v 和 npm -v 分别查看node和npm的版本号：

Microsoft Windows [版本 10.0.17134.765]
(c) 2018 Microsoft Corporation。保留所有权利。
C:\Users\22921>node -v
v10.15.3
C:\Users\22921>npm -v
6.4.1
C:\Users\22921>

1.1、配置npm在安装全局模块时的路径和缓存cache的路径（选操作）

-- 配置仓库地址
npm config set registry http://registry.npm.taobao.org/

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。

//D:\Program Files\nodejs为nodejs安装目录
npm config set prefix "D:\Program Files\nodejs\node_global" 
npm config set cache "D:\Program Files\nodejs\node_cache"
//修改完成后输入npm config ls查看修改信息，C:\Users\22921\.npmrc

1. 当安装完模块后还不能用，因为改变了默认的路径，需要修改系统的环境变量配置去让命令行识别命令，这里分为用户变量和系统变量。

新增环境变量 NODE_HOME=D:\nodejs
修改Path，追加 %NODE_HOME%\node_global

2. 使用npx的时候存在一个bug，因为cache路径Program Files中间存在空格，可以将cache的路径设置为D:\Program~1\nodejs\node_cache

1.2、npm常用命令

1.2.1、安装

 - 全局安装
npm install 模块名 -g    
 - 本地安装
npm install 模块名  
 - 一次性安装多个
 npm install 模块名 模块名    
 - 安装开发时依赖包
 npm install 模块名 --save-dev
 - 安装运行时依赖包
 npm install 模块名 --save

1.2.2、npm更新、卸载

 - 查看帮助命令
 npm help
 - 检查包是否已经过时
 npm outdated
 - 更新node模块
 npm update 模块名
 npm update 模块名 @版本号 更新到指定版本
 npm update 模块名 @latest
 - 卸载node模块
 npm uninstall 模块名

1.2.3、npm查看命令

 - 清除缓存
 npm cache clean --force  //清除缓存 
 - 查看某个包对于各种包的依赖关系
 npm view 模块名 dependencies
 - 查看包的源文件地址
 npm view 模块名 repository.url
 - 查看当前模块依赖的node最低版本号
 npm view 模块名 engines
 - 查看模块的当前版本号
 npm view 模块名 version
 - 查看模块的历史版本和当前版本
 npm view 模块名 versions
 - 查看一个模块的所有信息
 npm view 模块名
 - 查看当前已经安装的模块
 npm list
 npm list --depth=0  //限制输入的模块层级
 npm list 模块名
- 查看全局的包的安装路径
 npm root -g

1.2.3、其他

 - 更改包内容后进行重建
 npm rebuild 模块名
 - 访问package.json的字段文档
 npm help json
 - 查看某个模块的bugs列表界面
 npm bugs 模块名
 - 打开某个模块的仓库界面
 npm repo 模块名
 - 打开某个模块的文档
 npm docs 模块名
 - 打开某个模块的主页
 npm home 模块名
 - 清除未被使用到的模块
 npm prune

2、安装@vue/cli

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

npm install -g @vue/cli
# OR
yarn global add @vue/cli  //前提安装了yarn

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

2.1、创建一个项目

运行以下命令来创建一个新项目：

vue create hello-world -r https://registry.npm.taobao.org 

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
使用空格键选中，回车确认

Vue CLI v3.8.2
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features

选择手动 Manually select features

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择需要的模块:
Vuex --vue全局管理模块
Router --路由
Babel --语法转换降级，将es6或更高版本的语法编译成es5语法等

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

选择路由模式，分为history模式和hash模式，这里选择history。项目创建完成后可以修改。

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选择CSS Pre-processors，这里选用sass作为css预处理器

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

ESLint配置可参考

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

  Running completion hooks...

  Generating README.md...

  Successfully created project hello-world.
  Get started with the following commands:

 $ cd hello-world
 $ npm run serve


E:\fangwenzheng\vue\vue>cd hello-world

E:\fangwenzheng\vue\vue\hello-world>npm run serve

这时项目已经创建完成，等命令行执行完后。按照提示完成即可。
vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help

用法：create [options] 

创建一个由 `vue-cli-service` 提供支持的新项目


选项：

  -p, --preset        忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset        忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager   在安装依赖时使用指定的 npm 客户端
  -r, --registry             在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

3、安装 vue-devtools

github地址项目地址

Clone this repo //clone仓库
npm install (Or yarn install if you are using yarn as the package manager)
npm run build
Open Chrome extension page //项目路径\shells\chrome
Check "developer mode" //打开chrome浏览器扩展程序，选择开发模式
Click "load unpacked extension", and choose shells/chrome. //将项目路径\shells\chrome文件夹拖入浏览器即可

我已编译，直接下载解压添加到chrome插件中即可

使用时刷新vue项目页面，重新打开F12即可看到Console一栏最右边有Vue栏