vscode搭建vue3项目及遇到的问题
2022-07-08 10:19阅读：
原文链接：https://www.cnblogs.com/yyee/p/15513641.html
【1】安装nodejs
下载nodejs，
国内下载地址：http://nodejs.cn/download
下载完成之后双击文件【node-v16.8.0-x64.msi】安装。nodejs全局环境变量配置参考
https://www.cnblogs.com/yyee/p/15209612.html
检查nodejs是否安装：
node -v
(2) 设置淘宝镜像，提高npm安装软件的速度。
npm config
set registry
https:
//registry.npm.taobao.org
(3)安装cnpm及设置淘宝镜像
npm install -g cnpm
-registry=https:
//registry.npm.taobao.org
安装完成，查看cnpm是否安装成功 cnpm -v
以管理员权限打开powershell窗口
【2】安装vue-cli 3脚手架及环境配置
首先要御载vue-cli 2，然后再安装vue-cli 3 ，
#御载vue cli 2
npm uninstall -g vue-
cli
#安装vue cli 3 cnpm install -g @vue/cli
查看vue状态，参数-V为大写。
vue -V 或 vue --version
安装开发当中可能用到的依赖
#安装 Promise,vue-
router，vuex, axios, qs cnpm install
es6-promise --
save cnpm install vue-router
--
save cnpm install vuex --
save cnpm install
axios --
save cnpm install qs #安装style,css,less cnpm
install css-loader style-loader --save-
dev cnpm
install less less-loader --save-
dev #安装saas cnpm
install -g sass --save-
dev cnpm install
node-sass --save-
dev cnpm install sass-loader
--save-dev
在vue3脚手架中安装element ui for vue3插件，插件名为 element-ui，安装
icon图标
cnpm i element-ui -S
cnpm install
@element-plus/icons
【3】创建vue3项目
创建命令为：vue create 项目名称。
进入vue3项目要保存的目录。
cd F:\code\web vue create vue3_demo
【4】运行项目
打开一个新的终端，运行命令 npm run serve 运行vue3_demo项目。
注意：这里vue3运行指令变成了 —— npm run serve，不再是dev
【5】打包vue3项目
在vscode终端输入
npm run build
打包成功后会生成一个dist文件夹，打包文件全部放在dist文件夹里。
【6】 将vue3配置typescript环境
安装 type
cnpm install -g typescript
然后用vs code打开vue3项目，打开一个新的vs code终端，运行命令 vue add typescript
