VSCode创建VUE前端项目

VSCode创建VUE前端项目

一、node.js

1、下载并安装node.js

2、配置npm

​ a、设置淘宝镜像

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

​ b、安装全局脚手架

	npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟

二、创建项目

1、创建一个工作空间（就是找个地方创建一个空目录）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ni1Ync7X-1655126454075)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613205909472.png)]

2、打开vscode,打开这个文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SoZOydJU-1655126454077)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613205942089.png)]

3、初始化项目

vue init webpack vuedemo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bDNVxqNa-1655126454078)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613210011156.png)]

4、如果报错：

Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.

执行一下npm i -g @vue/cli-init

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pHO9UigN-1655126454079)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613210015803.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UecqRBOf-1655126454080)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613210051138.png)]

5、再执行vue init webpack vuedemo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y3U3S30U-1655126454081)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613204625494.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3caa6sYf-1655126454083)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613204812679.png)]

6、启动项目 & 停止项目

cd jt01 # 进入项目目录 

npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBRDjq3E-1655126454084)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613210134934.png)]

7、安装 element-ui

npm i element-ui –D

ZBRDjq3E-1655126454084)]

7、安装 element-ui

npm i element-ui –D

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-167TUMv7-1655126454085)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613210205893.png)]