做网站接项目,wordpress大淘客采集,基于php的网站开发流程,嘉兴人才网简易后台系统搭建开启#xff0c;分几篇文章更新#xff0c;本篇主要先搭架子#xff0c;配置入口文件等目录 效果图一、搭建脚手架#xff1a;二、处理package.json基础需要的依赖及运行脚本三、创建环境运行文件四、填充vue.config.ts配置文件五、配置vite-env.d.ts使项目…
简易后台系统搭建开启分几篇文章更新本篇主要先搭架子配置入口文件等 目录 效果图一、搭建脚手架二、处理package.json基础需要的依赖及运行脚本三、创建环境运行文件四、填充vue.config.ts配置文件五、配置vite-env.d.ts使项目可引入.vue文件作为组件使用六、配置入口文件App.vue及main.ts 效果图 一个前端的项目要包含 ├── build 项目构建配置
├── public 打包所需静态资源
├── src├── api AJAX请求└── assets 项目静态资源├── iconfont 使用的iconfont里面的自定义图标├── icons 自定义图标资源└── images 图片资源├── axios 接口请求├── components 业务组件├── config 项目运行配置├── directive 自定义指令├── mixins 自定义vue mixins├── plugins 自定义vue插件├── router 路由配置├── pinia Vue3 全局状态管理库├── styles 公共样式├── utils 封装工具函数├── views 页面文件├── App.vue 页面入口文件主组件。一般只放router-view├── main.ts 初始化vue实例引入所需的插件
├── package.json 依赖配置脚本配置程序入口配置等
└── vite.config.ts vue配置文件呐----一步一步走首先我们要有个架子然后慢慢往里面填充
一、搭建脚手架
使用Vite创建项目
npm create vitelatest
或者
npm install -g create-vite-app
create-vite-app 【项目名称】;
const resolve (dir) {return path.join(__dirname, dir);
};
export default defineConfig(({ command, mode }) {let env {} as any;const isBuild command build;if (!isBuild) {env loadEnv(process.argv[3] --mode ? process.argv[4] : process.argv[3], root);} else {env loadEnv(mode, root);}return {base: env.VITE_BASE_PATH,plugins: [Vue(),VueJsx(),// 按需加载组件Components({resolvers: [AntDesignVueResolver({importStyle: false,prefix: ,}),],}),],resolve: {alias: [{find: vue-i18n,replacement: vue-i18n/dist/vue-i18n.cjs.js,},{find: ,replacement: resolve(src),},],},build: {minify: terser,outDir: env.VITE_OUT_DIR || dist,sourcemap: env.VITE_SOURCEMAP true ? inline : false,terserOptions: {compress: {drop_debugger: env.VITE_DROP_DEBUGGER true,drop_console: env.VITE_DROP_CONSOLE true,},},},server: {port: 4000,proxy: {/service: {target: http://127.0.0.1:8080/,rewrite: (path) path.replace(/^\/api/, ^/),},},hmr: {overlay: false,},host: 0.0.0.0,},};
});
五、配置vite-env.d.ts使项目可引入.vue文件作为组件使用
注此文件和mian.ts同级
/// reference typesvite/client /declare module *.vue {import { DefineComponent } from vue;// eslint-disable-next-line typescript-eslint/no-explicit-any, typescript-eslint/ban-typesconst component: DefineComponent{}, {}, any;export default component;
}
六、配置入口文件App.vue及main.ts
App.vue
templatediv idapprouter-view //div
/templatescript
export default {name: App,
};
/scriptstyle langless
.size {width: 100%;height: 100%;
}
html,
body {.size;overflow: hidden;margin: 0;padding: 0;
}
#app {.size;
}
/style
main.ts
import { createApp } from vue;
import App from ./App.vue;
import router from /router/index;
import { setupStore } from /pinia/index;
import /styles/index.css;
import /styles/iconfont/iconfont.css;
import vxe-table/lib/style.css;
import { message } from ant-design-vue;
import VXETable from vxe-table;
import /plugins/table;
const app createApp(App);
// 使用路由
app.use(router);
// 引入VXETable表格组件非强制组件可直接用antd的表格组件也可
app.use(VXETable);
// 设置全局message 单页面使用inject获取message
app.provide(message, message);
// 设置全局Pinia
setupStore(app);
// 挂载App
app.mount(#app);
此篇Over未完待续其他文章更新Ajax通信和路由设置含动态路由等。
