说明
-
node版本：16.14.2
-
包管理工具： pnpm，7.6.0
-
技术栈： Vue3 + TypeScript + Vite
-
不使用vite自带的命令创建项目。
-
只涉及项目基本框架，不涉及日常业务，如果出现业务代码也只是用于测试框架的功能，仅供参考。
项目地址：github
创建项目
1.创建文件
创建并进入空白文件夹admin-v-manage
2.生成package.json项目清单
npm init
包名输入admin-v-manage其它选项一路Enter即可。
3.创建项目目录并安装依赖
#生产依赖： vue全家桶 pinia持久化 网络请求 组件 图标 页面加载进度条
pnpm i vue vue-router pinia pinia-plugin-persistedstate axios element-plus @element-plus/icons-vue nprogress
#开发依赖： ts css预处理器
pnpm install -D typescript less
#开发依赖： vite vite编译vue文件功能 vite编译jsx文件功能 类型：使ts支持node 类型：nprogress的类型支持 vue文件类型检查工具
pnpm install -D vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx @types/node @types/nprogress vue-tsc
4. 按照下面的目录树创建文件,重要页面代码如下：
admin-v-manage
├─index.html # 入口html
├─package.json # 项目清单，第2步已创建
├─src # 项目资源文件夹
| ├─App.vue # 入口组件
| ├─main.ts # 入口ts
| ├─views # 页面组件文件夹
| | ├─user
| | | └index.vue
| | ├─dashboard
| | | └index.vue
| | ├─auth
| | | └index.vue
| ├─utils # 工具函数
| ├─styles # 公共样式
| | ├─index.less # 公共样式入口
| | ├─normallize.less # 预设样式
| | └─vars.less # less变量
| ├─store # 仓库
| ├─router # 路由
| | └index.ts
| ├─assets # 静态资源
| ├─api # 网络请求相关
> styles/index.less
@import url('./vars.less');
@import url('./normallize.less');
> styles/normallize.less
我用的这个开源项目：minireset.css
> router/index.ts
import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
// 路由
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'dashboard',
component: () => import('../views/dashboard/index.vue'),
meta: {},
},
];
const router = createRouter({
history: createWebHashHistory(), //hash模式
routes,
});
router.beforeEach(async (to, from, next) => {
NProgress.start(); //页面跳转前开启进度条
next();
});
router.afterEach(() => {
NProgress.done(); //页面跳转完成后关闭进度条
});
export default router;
> store/index.ts
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); //pinia数据持久化存储
export default pinia;
> main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './store';
import './styles/index.less';
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount('#app');
到目前为止，整体项目的架子就已经搭建起来了，但是你会发现项目还是无法运行起来。这是由于vite还无法对vue模板进行编译。所以我们需要创建vite.config.ts对vite进行配置，在项目根目录下创建文件：
> vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import type { UserConfig, ConfigEnv } from 'vite';
import { fileURLToPath } from 'url';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const root = process.cwd(); //获取当前工作目录
const env = loadEnv(mode, root); //获取环境变量
return {
root, //项目根目录
base: './', //项目部署的基础路径
plugins: [
// Vue模板文件编译插件
vue(),
// jsx文件编译插件
vueJsx(),
],
// 配置别名
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'#': fileURLToPath(new URL('./types', import.meta.url)),
},
},
};
});
并在package.json文件添加如下代码：
"scripts": {
"dev": "vite",
},
接下来，我们运行
npm run dev命令，就能启动我们创建的项目了。
下一期我们继续完善项目代码开发规范：二、集成eslint、prettier和stylelint。
