VUE 3.0项目环境搭建+VS code安装（图文教程）

1、VS code 下载安装，参考下面

点我去下载

2、Node.js 官方网站下载：点我进入官网

我这安装目录为：D:\nodejs

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理管理，
所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示

 

然后在cmd命令下执行如下两个命令：

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

 执行完成后，配置环境变量：

行完后，配置环境变量，如下：
“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“D:\nodejs\node_global”，如下图：

 

“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应的路径新增：“D:\nodejs\node_global”，如下：

 

在cmd命令下执行 npm install webpack -g 安装webpack

安装VUE 

安装淘宝镜像源：npm install -g cnpm --registry=http://registry.npm.taobao.org；

npm可以用来下载vue，输入命令npm install vue -g和命令npm install vue-cli -g就可以了

安装插件：

vetur

Chinese

安装成功后如下图所示

 

打开终端，执行命令  vue init webpack Demo1 报错了：

 

解决办法：

输入  Set-ExecutionPolicy -Scope CurrentUser

值输入 RemoteSigned

输入get-ExecutionPolicy

下载中。。。。

安装这样子出现一些步骤，安装提示选择即可，注意Project name 不能有大写字母

否则报错：Sorry, name can no longer contain capital letters.（抱歉，名称不能再包含大写字母。）

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���

�������ļ�

? Project name demo

? Project description A Vue.js project

? Author

? Vue build runtime

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch? Yes

? Should we run `npm install` for you after the project has been created? (recommended) npm

 

 写的很清楚，直接切换Demo1 
 

To get started:

  cd Demo1

  npm run dev

执行这两条命令

访问：

成功了。

VS code打开刚才创建的 Demo1，项目结构也有了

 

至此，第一个vue项目环境搭建完毕。