1.vue使用vite构建初始化项目

npm create vue@latest

---

❯ npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3_test
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No

Scaffolding project in /home/ying/VueProj/vue3_test...

Done. Now run:

  cd vue3_test
  npm install
  npm run dev

进入刚刚创建的目录，并安装依赖
2.

cd vue3_test
npm i

---

这个时候，npm安装可能一直在转圈圈，没有显示进度，我们可以通过查看网速状态来观察是否正常下载。

❯ npm i

added 175 packages, and audited 176 packages in 1m

45 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

其他

npm run dev的dev来源

目录结构

index.html
内容多是因为这个main.ts，通过src引入

main.ts里引入了App.vue并挂载到了id为app的标签

进入App.vue发现是由其他组件在这个根组件(App.vue)内"拼接"的

vscode推荐的插件