1、安装node环境
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
- 当安装完模块后还不能用，因为改变了默认的路径，需要修改系统的环境变量配置去让命令行识别命令，这里分为用户变量和系统变量。
新增环境变量 NODE_HOME=D:\nodejs
修改Path，追加 %NODE_HOME%\node_global
- 使用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
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 <space> to select, <a> to toggle all, <i> 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 <space> to select, <a> to toggle all, <i> 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] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
选项：
-p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项
-d, --default 忽略提示符并使用默认预设选项
-i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端
-r, --registry <url> 在安装依赖时使用指定的 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
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文件夹拖入浏览器即可
使用时刷新vue项目页面，重新打开F12即可看到Console一栏最右边有Vue栏
