关于vue的环境搭建

关于vue的环境搭建

1.第一步检测一下电脑是否安装node.js

（1）在cmd页面，用命令行输入node -v，若出现不是内部或外部命令，也不是可运行的程序…”时说明没有安装node.js;

还有一种可能就是当时安装的时候没有配置环境变量，这个要根据自己的情况来定了。

（2）https://nodejs.org/en/ 下载并安装node.js，在该网站进行node.js的安装下载，然后进行安装。

（3）在安装完成之后，在cmd输入 “npm -v” 来测试是否安装成功

2.安装全局的webpack

命令行输入:

npm install webpack -g 进行全局安装

3.安装vue-cli脚手架工具

命令行输入:

npm install -g vue-cli  进行全局安装
npm install -g @vue/cli 安装新的版本 两个命令二选1

安装完成之后在命令行输入：vue来验证是否安装成功

4.若“3”之后出现不是内部可执行的程序等内容，则说明环境变量没有配置，此时手动打开安装node.js的文件夹对环境变量进行配置，直到vue可以出现内容。

ps：win11系统使用还有一个小坑就是在桌面打开命令行即时配置了环境变量也会显示不是可执行程序，此时采用 win+r输入cmd的方式打开命令行进行验证。

5.配置完成之后就可以对项目进行创建

在某个文件夹的命令行下输入(在哪个文件夹下，项目将创建到对应的位置)即可自动创建项目

 vue init webpack test(项目名称)

之后会出现配置的内容

6.之后在命令行输入

npm run dev 运行测试

7.最后在浏览器打开可以弹出如下页面即可

8.之后的项目可以在vscode 上面打开进行运行了，在这儿推荐几个需要装的插件

1.Vetur —— 语法高亮、智能感知、Emmet等

2.EsLint —— 语法纠错

3.Auto Close Tag —— 自动闭合HTML/XML标签

4.Auto Rename Tag —— 自动完成另一侧标签的同步修改

5.JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

6.open in browser——直接右键项目单击启动

7.live Server --方便调试更改

参考文档:

6.open in browser——直接右键项目单击启动

7.live Server --方便调试更改

参考文档:

VSCode 开发Vue必备插件_渐暖°的博客-CSDN博客_vscode vue插件