Vue3 实战（一）

1. 技术栈

• Vue3 (版本: 3.2.25)
• TypeScript (版本: 4.5.4)
• Vite (版本: 2.8.0)
• Vue-Router (版本: 4.0.13)
• Vuex (版本: 4.0.2)
• Axios (版本: 0.20.0-0)
• Element-Plus (版本: 2.2.0)
• Echarts (版本: 5.3.2)
• ThreeJs (版本: 0.140.2)

2. 基础搭建

  以MacOS环境为例，终端输入npm init @vitejs/app按如下步骤执行，将会生成Vue3+TypeScript+Vite基础项目。

Monster:Blog chiang$ npm init @vitejs/app
Need to install the following packages:
  @vitejs/create-app
Ok to proceed? (y) y
npm WARN deprecated @vitejs/create-app@2.5.2: @vitejs/create-app has been moved to create-vite, please use 'npm create vite@latest' or 'yarn create vite' instead
​
@vitejs/create-app is deprecated, use npm init vite instead
​
✔ Project name: … app
✔ Select a framework: › vue
✔ Select a variant: › vue-ts
​
Scaffolding project in /Users/chiang/Person/Blog/app...
​
Done. Now run:
​
  cd app
  npm install
  npm run dev
​
npm notice 
npm notice New minor version of npm available! 8.10.0 -> 8.11.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.11.0
npm notice Run npm install -g npm@8.11.0 to update!
npm notice 
Monster:Blog chiang$ 

  输入npm install进行安装。

Monster:app chiang$ npm install
​
added 39 packages in 14s
npm notice 
npm notice New minor version of npm available! 8.10.0 -> 8.11.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.11.0
npm notice Run npm install -g npm@8.11.0 to update!
npm notice 

3. 安装依赖

• Vue-Router

npm install vue-router@next

• Vuex

npm install vuex@next

• Axios

npm install axios

• Element-Plus

官网: element-plus.gitee.io/zh-CN

npm install element-plus

• Echarts

官网: echarts.apache.org/examples/zh…

npm install echarts@next

• ThreeJs

手册: ourjs.com/wiki/view/t…

npm install three@next

4. 目录结构

├── public
│   └── favicon.ico
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── env.d.ts
│   └── main.ts
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

• public: 略。
• src: 存放编写的组件、插件、配置、样式等等。
• package.json: 项目的依赖信息，启动信息等。
• tsconfig.json: 系统级别的配置信息，如ES语言版本、ES功能库等等。
• vite.config.ts: 系统级别的配置信息，如代理、插件、路径的声明等等。
• 其他: 略。