开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天
- vue3项目的创建有两种方式：1.vite创建（基于Rollup），2.使用vue-cli创建（基于webpack）
1.创建一个基于vite开发的vue3项目
tips：
创建前先检查是否安装 node -v 查看node版本
vite需要Node.js 版本>=12.0.0
可以通过附加命令指定项目名称和想要使用的模板 例如：my-vue3-demo是项目名称， template vue是创建一个vue模板
npm init vite@latest my-vue3-demo -- --template vue
接着选择 y、vue 、vue 就完成项目创建
接着进入项目：cd my-vue3-demo
安装依赖：npm install
运行项目：npm run dev
就可以正常启动项目了
2.使用vue-cli脚手架创建vue3项目
vue -V 查看vue版本，需要在4.5.1版本之后进行创建
2.1创建项目
- 1）使用命令 vue create my-vue3-demo 创建Vue项目
- 2）进入选项配置，配置项如下：
Please pick a preset - 选择 Manually select features 进行手动配置
Check the features needed for your project - 记得勾选上 TypeScript ，需要注意点是空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车
- 3）选择完毕后，回车，项目就创建完成，接着根据提示进入项目
进入项目：cd my-vue3-demo
启动项目：npm run serve
- 接下来就可以根据自己需求 安装node-sass sass-loader 以及项目所需要的ui库
- 安装node-sass 以及sass-loader时可能会因为node版本问题安装错误
-
- 当前已知 node-sass 与 node 版本对应如下： gitcode.net/mirrors/sas…
- node-sass 和 sass-loader 的常见版本对应关系如下：
| node-sass | sass-loader |
|---|---|
| 4.3.0 | 4.1.1 |
| 4.7.2 | $7.0.3/7.3.1 |
| 6.0.1 | 10.0.1 |
- 我的项目node版本是12.16.2 node-sass版本4.12.0 sass-loader版本7.3.1
