本项目用到的框架和工具：vite2 + vue3 + vue-router4 + vuex4 + TS
1.搭建 Vite + Vue 项目
Vite 需要 Node.js 版本 >= 12.0.0。
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# 如果用ts的话：
npm init @vitejs/app my-vue-app --template vue-ts
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
npm -v查看npm版本
2.配置路由
npm install vue-router@4 --save
- 在
src目录下新建router文件夹，新建index.ts路由配置文件:
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 这里还是用路由懒加载方式
const Home = () => import("../src/components/Home/Index.vue");
const Detail = () => import("../src/components/Detail/Index.vue");
const notFound = () => import("../src/components/notFound.vue");
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
meta: {
title: "首页"
},
component: Home
},
{
path: "/detail",
name: "Detail",
meta: {
title: "详情页"
},
component: Detail
},
{
// 这里不能直接使用vue-router3.x的*通配符做path了
// vue-router4.x将匹配所有内容并将其放在 `$route.params.pathMatch` 下
path: "/:pathMatch(.*)*",
name: "notFound",
meta: { title: "404" },
component: notFound
}
]
const router = createRouter({
history: createWebHistory(), //用最舒服的H5 history模式
routes // `routes: routes` 的缩写,ES6语法糖
});
export default router;
- 在
main.ts中：
//创建并挂载根实例，使整个应用支持路由
import { createApp } from 'vue'
import App from './App.vue'
import router from "../router/index";
createApp(App).use(router).mount('#app')
- 在
App.vue入口组件中：
<template>
<div>
<!-- 使用`router-view`标签匹配首页 -->
<router-view></router-view>
</div>
</template>
3.配置vuex状态管理模式+库
# 安装vuex4.x
npm install vuex@next --save
- 和router相同，在src目录下新建
store文件夹，并新建index.ts文件：
// 让我们把vuex的5个核心概念同时回顾下，一步到位
import { createStore } from "vuex";
const moduleA = {
state: () => ({
count: 0,
list: [{ id: 1, name: "nick", age: "18", isShow: true }, { id: 2, name: "mack", age: "19", isShow: false }]
}),
getters: {
formatList(state:any) {
return state.list.filter((v: { isShow: any; }) => v.isShow)
}
},
mutations: {
increment(state:any, data:any) {
console.log(state, data)
state.count = data.amount;
}
},
actions: {
incrementAsync(store:any, data:any) {
setTimeout(() => {
store.commit('increment', data)
}, 2000);
}
}
}
const store = createStore({
modules: {
a: moduleA
}
})
export default store
- 和
router相同，在main.ts中：
import store from "../store/index";
createApp(App).use(store).mount('#app')
// 这样就可以全局访问到store仓库
// 因为我们用了module核心概念，所以获取store中的数据：this.$store.state.a.count
需要注意的是Vuex 没有为
this.$store属性提供开箱即用的类型声明，因为我们项目用的ts，所以需要先声明自定义的模块补充（这样只会编辑器警告，代码还是可以正常运行的，但是警告会看着很难受，所以必须解决）
所以在src目录下新建vuex.d.ts文件：
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
declare module '@vue/runtime-core' {
// 声明自己的 store state
interface State {
// 因为我们上面使用了vuex的module，所以直接声明module名就行
a: any
}
// 为 `this.$store` 提供类型声明
interface ComponentCustomProperties {
$store: Store<State>
}
}
4.配置环境变量
只要是软件，必须有api，有api必须有环境区分
和vue-cli 4.x类似，我们需要在和package.json同级目录下新建.env.dev、.env.test和.env.prod文件来区分开发，测试和正式环境；
然后在对应的文件中加入对应的base_url等值；
比如在.env.prod文件中：
NODE_ENV=prod
VITE_APP_BASE_API = "api.prod.com"
在项目的任意位置就可以通过import.meta.env获取到环境变量信息；
当然我们做环境区分的目的还是要自动打不同环境的包，所以在package.json文件中：
"scripts": {
"dev": "vite --mode dev",
"test": "vite build --mode test",
"build": "vite build --mode prod",
"serve": "vite preview"
},
例：打测试环境的包，只需要执行npm run test即可；
5.提升开发效率，明确dom结构，当然少不了css预处理器，相应的预处理器依赖本身必须安装
# .scss and .sass ,这里只举一个sass例子
npm install -D sass
- 如果有单独引入
.scss,.sass,.less,.styl和.stylus文件，或者只是在vue单文件组件中使用：
<style lang="scss" scoped>
.home-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.btn {
margin-top: 2rem;
}
}
</style>
