个人网站 备案备注,网站的模板管理,logo素材大图,福建省建设厅网站投诉前言#xff08;与搭建项目无关#xff09;#xff1a; 可以安装一个node管理工具#xff0c;比如nvm#xff0c;这样可以顺畅的切换vue2和vue3项目#xff0c;以免出现项目跑不起来的窘境。我使用的nvm#xff0c;当前node 22.11.0 目录
搭建项目
添加状态管理库与搭建项目无关 可以安装一个node管理工具比如nvm这样可以顺畅的切换vue2和vue3项目以免出现项目跑不起来的窘境。我使用的nvm当前node 22.11.0 目录
搭建项目
添加状态管理库使用pinia 添加全局组件模版
加入路由vue-router 搭建项目 直接贴代码都准备使用vite了肯定一看就明白
npm init vite data-analysis
Need to install the following packages:
create-vite5.5.5
Ok to proceed? (y) ynpxcreate-vite data-analysis√ Select a framework: » Vue
√ Select a variant: » TypeScriptScaffolding project in D:\projects\data-analysis...Done. Now run:cd data-analysisnpm installnpm run dev
如上你就能得到一个超级干净啥都没有的项目结构。接下来需要补齐一些常用的东西文件夹按照自己的习惯新建即可示例如下。 添加状态管理库使用pinia
npm i pinia -S 在store下创建index.ts,同时创建modules文件夹将state模块化
import { appStore } from ./modules/app;
import { createPinia } from pinia;const store: any createPinia();
// const store: any {}
export const registerStore () {store.appStore appStore();
};export default store;// modules文件夹下新建app.ts内容如下
import { defineStore } from pinia;
export const appStore defineStore(appStore, {state: () ({scrollFlag: false,pageLoading: false,}),actions: {setScrollFlag(flag: any) {this.scrollFlag flag;},setPageLoading(flag: any) {this.pageLoading flag;},},
});
main.ts中导入store
import { createApp } from vue;
import App from ./App.vue;
import store, { registerStore } from ./store;
const setupAll async () {const app createApp(App);// 注册 Piniaapp.use(store);// 注册 自定义指令registerStore();app.mount(#app);
};setupAll(); 重写App.vue文件
templateel-config-provider :sizesizerouter-view //el-config-provider
/templatescript setup langts
import { ref} from vue;
const size ref(small);
/script添加全局组件模版
// 在layout文件夹下新建index.vue用做路由组件模版路径可自行修改
// 这一步在搭建后台管理项目的时候很重要可以把菜单栏封装到此处
templatediv classweb-main-container通用组件模版router-view //div
/templatescript setup nameindexPage/script
// 添加scss之后编译会报错需要npm i sass -D
style langscss
import /assets/styles/reset.scss;
.ellipsis {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
/style加入路由vue-router
npm i vue-router -S //安装路由
在router下创建index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from vue-router;import Layout from /layout/index.vue;
// 配置静态路由
export const constantRoutes: RouteRecordRaw[] [{path: /,redirect: home,component: () Layout,children: [{path: home,name: 首页,component: () import(../views/home/index.vue),meta: { title: 首页, hidden: true },},],},{path: /404,component: () import(../views/404.vue),},
];export const router createRouter({history: createWebHistory(),routes: constantRoutes,
});在main.js里引入router
import { createApp } from vue;
import App from ./App.vue;
import store, { registerStore } from /store;
import { router } from ./router;
const setupAll async () {const app createApp(App);// 注册路由app.use(router);// 注册 Piniaapp.use(store);// 注册 自定义指令registerStore();app.mount(#app);
};setupAll();编译之后可能会报错vite.config.ts加以下配置
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { resolve } from path;
// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {extensions: [.mjs,.js,.ts,.jsx,.tsx,.json,.scss,.css,],// 配置别名alias: {: resolve(__dirname, ./src),vue-i18n: vue-i18n/dist/vue-i18n.cjs.js,},//去掉scss编译警告css: {preprocessorOptions: {scss: {api: modern-compiler,},},},},
});路由守卫接口调用权限配置等其他功能下一次在写
