对于 Vue 3，推荐使用 Vite 创建项目，因为其能够提供更好的调式体验。
# 预装环境：NPM、NODE
$ npm -v
9.4.2
$ node -v
v16.19.0
使用 Vite初始化项目： npm init vite
$ npm init vite
✔ Project name: … geek-admin
✔ Select a framework: › Vue
✔ Select a variant: › Customize with create-vue ↗
Need to install the following packages:
create-vue@3.5.0
Ok to proceed? (y)
Vue.js - The Progressive JavaScript Framework
✔ 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 / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in /home/donald/Documents/Code/FrontEnd/vue/vue-practice/geek-admin...
Done. Now run:
cd geek-admin
npm install
npm run lint
npm run dev
创建完项目后，来看下文件目录：
.
├── README.md
├── index.html 入口文件
├── package.json
├── public # 资源文件
│ └── favicon.ico
├── src # 源码
│ ├── App.vue # 单文件组件
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js # 入口
└── vite.config.js vite # 工程化配置文件
把项目启动起来：
- 先
npm install - 再
npm run dev - 后
http://localhost:5173/打开即可
$ npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
added 439 packages in 41s
$ npm run dev
> geek-admin@0.0.0 dev
> vite
VITE v4.1.1 ready in 377 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
从这个页面可以看到：
- 推荐
IDE：VSCode+Volar - 搭建工具：
Vite - 测试组件和网页：
Cypress - 官方工具和库：
Pinia、Vue Router、Vue Test Utils和Vue Dev Tools
开发项目时， Vue是核心，同时有两个组件也是是必须的：
vue-router路由： 负责管理路由vuex： 负责管理数据
# 可以使用如下来安装：
$ npm install vue-router@next vuex@next
开发时，需知团队规范，对文件夹进行分层， src下：
├── src
│ ├── api # 数据请求
│ ├── assets # 静态资源
│ ├── components # 组件
│ ├── pages # 页面
│ ├── router # 路由配置
│ ├── store # vuex数据
│ └── utils # 工具函数
路由
在 router文件夹中有 index.js ，代码如下：
// createRouter: 用来新建路由实例
// createWebHistory: 用来配置我们内部使用 hash 模式的路由，就是 url 上 # 来区分
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
});
export default router;
搭配工具
工程化体系都是基于 Node.js 生态：
- 使用
VS Code+Volar编辑器 + 语法提示工具作为上层开发工具：Volar - 使用
Vite作为工程化工具 - 使用
Chrome进行调试：Vue 3 调试插件
实际项目开发中还会有各种工具的集成：
- 写 CSS 代码时： 需要预处理工具
stylus或者sass - 组件开发： 使用
Element3作为组件库 - 网络请求： 使用
Axios - 规范代码格式：
Eslint和Prettier - 规范
Git日志：commitizen
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情
