目录

 

一、安装Visual Studio Code

1.1 安装包下载地址

1.2 设置中文语言包

1.3 详细安装流程

二、安装Node.js

2.1 Node.js 下载地址

2.2 详细安装流程

2.3 设置相关文件夹

2.4 在Visual Studio Code 启动终端命令面板

2.5 查看是否安装 node.js

2.4 查看 npm 版本

三、利用 NPM 配置文件夹和安装Vue.js

3.1 利用 NPM 安装 Vue.js 脚手架（3.x）

3.2 利用 NPM 安装 Vue.js 脚手架（2.x）

3.3 <可选择>设置 node_global 和 node_cache 目录

四、创建一个 Vue.js 项目

4.1 查看 Vue.js 版本

4.1 vue/cli (2.x版本）利用 init 方式创建

4.2 vue/cli (3.x版本）利用 create 方式创建

---

一、安装Visual Studio Code

1.1 安装包下载地址

sfdsf

1.2 设置中文语言包

士大夫

1.3 详细安装流程

参考...

二、安装Node.js

2.1 Node.js 下载地址

https://nodejs.org/dist/v13.5.0/node-v13.5.0-x64.msi

2.2 详细安装流程

参考...

2.3 设置相关文件夹

在安装完的node.js文件夹根目录创建2个文件夹名称分别为 node_global 和 node_cache。

说明：创建的目的是为了方便集中管理 vue 的相关内容，默认路径是在“C:\Users\用户名\AppData\Roaming\npm”，如用默认路径可以不用参考第三步中的 “输入如下命令配置文件夹关系”

2.4 在Visual Studio Code 启动终端命令面板

利用快捷键【ctrl + shift + `】或 【终端】菜单-->【新建终端】选项

2.5 查看是否安装 node.js

查看安装版本的命令

node -v

2.4 查看 npm 版本

新版的 Node.js 已经自动安装了 npm，查看版本请用如下命令

npm -v

三、利用 NPM 配置文件夹和安装Vue.js

3.1 利用 NPM 安装 Vue.js 脚手架（3.x）

vue/cli (3.x版本）版本输入如下命令：

npm install -g @vue/cli

3.2 利用 NPM 安装 Vue.js 脚手架（2.x）

vue/cli (2.x版本）版本输入如下命令：

npm install -g vue-cli

3.3 <可选择>设置 node_global 和 node_cache 目录

输入如下命令配置文件夹关系

npm config set prefix "node.js的根目录\node_global"
npm config set cache "node.js的根目录\node_cache"

四、创建一个 Vue.js 项目

4.1 查看 Vue.js 版本

请使用如下命令：

vue -V
说明：V 是大写的。

如果出现“'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件”，可能是执行了【3.1 设置 node_global 和 node_cache 目录】的命令，所以需要增加一条环境变量。

先使用获取配置文件列表命令查看 prefix 值：

npm config list

将输出的 prefix 添加到环境变量；

第一步：我的电脑（此电脑）右键属性-->【高级系统设置】如图（1）

图（1）

第二步：单击【环境变量】如图（2）

图（2）

第三步：选择当前用户的变量区域的“path”这一行，单击【编辑(E)...】进行修改，添加路径；如图（3）

图（3）

第四步：将路径添加进去保存即可解决“'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件”的问题。

说明：推荐把系统区域的“path”这一行，单击【编辑(E)...】进行修改，添加路径。

 

4.1 vue/cli (2.x版本）利用 init 方式创建

输入如下命令：

vue init webpack 项目名（只能小写字母，不可以用大写字母）

说明：init 方式用于 cli2.x 版本，与 cli3.x 模板不同，可升级到 cli3.x。

4.2 vue/cli (3.x版本）利用 create 方式创建

输入如下命令：

vue create 项目名（只能小写字母，不可以用大写字母）
特殊说明：如果使用 vue init webpack 项目名的方式请先执行 npm install -g @vue/cli-init

说明：create 方式用于 cli3.x 版本，与 cli2.x 模板不同。

I:\Projects\学习VUE.JS\Visual Studio Code Learning Vue.js>vue -V
@vue/cli 4.1.1

I:\Projects\学习VUE.JS\Visual Studio Code Learning Vue.js>vue create my-first-vue-project


Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.1.1
✨  Creating project in I:\Projects\学习VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install I:\Projects\学习VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@3.6.1 postinstall I:\Projects\学习VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall I:\Projects\学习VUE.JS\Visual Studio Code Learning Vue.js\my-first-vue-project\node_modules\ejs
> node ./postinstall.js

added 1130 packages from 826 contributors in 31.474s

32 packages are looking for funding
  run `npm fund` for details

�  Invoking generators...
�  Installing additional dependencies...

added 59 packages from 53 contributors in 14.47s

32 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project my-first-vue-project.
�  Get started with the following commands:

 $ cd my-first-vue-project
 $ npm run serve