江苏水利厅建设网站,依博罗阀门北京有限公司,网页设计ai,照片做视频ppt模板下载网站好一 Vite创建Vue3项目
1.1.创建Vue3项目
1.1.1.运行创建项目命令 # 使用 npm npm create vitelatest 1.1.2、填写项目名称 1.1.3、选择前端框架 1.1.4、选择语法类型 1.1.5、按提示运行代码 1.1.6浏览器问 localhost:5173 预览 1.2项目结构
1.2.1vite.config.ts 1.2.2 pac…一 Vite创建Vue3项目
1.1.创建Vue3项目
1.1.1.运行创建项目命令 # 使用 npm npm create vitelatest 1.1.2、填写项目名称 1.1.3、选择前端框架 1.1.4、选择语法类型 1.1.5、按提示运行代码 1.1.6浏览器问 localhost:5173 预览 1.2项目结构
1.2.1vite.config.ts 1.2.2 package.json 二 src 路径别名配置 相对路径别名配置使用 代替 src Vite 配置 import { defineConfig } from vite; // Vite 配置方法
import vue from vitejs/plugin-vue; // Vite 官方的 Vue 插件import { fileURLToPath, URL } from node:url;// https://vite.dev/config/
export default defineConfig({plugins: [// Vue.js 插件vue(),],// 模块解析配置resolve: {alias: {// 将 别名映射到 src 目录简化导入路径: fileURLToPath(new URL(./src, import.meta.url)),},},
});npm install -D types/node 三unplugin 自动导入 Element Plus 官方文档中推荐 按需自动导入 的方式而此需要使用额外的插件 unplugin-auto-import 和 unplugin-vue-components 来导入要使用的组件。所以在整合 Element Plus 之前先了解下自动导入的概念和作用 概念
为了避免在多个页面重复引入 API 或 组件由此而产生的自动导入插件来节省重复代码和提高开发效率。 3.1安装插件依赖
npm install -D unplugin-auto-import unplugin-vue-components
3.2vite.config.ts - 自动导入配置
先创建好 /src/types 目录用于存放自动导入函数和组件的TS类型声明文件再进行自动导入配置
// vite.config.ts
import AutoImport from unplugin-auto-import/vite;
import Components from unplugin-vue-components/vite;import path from path;const pathSrc path.resolve(__dirname, src);plugins: [AutoImport({// 自动导入 Vue 相关函数如ref, reactive, toRef 等imports: [vue],eslintrc: {enabled: true, // 是否自动生成 eslint 规则建议生成之后设置 false filepath: ./.eslintrc-auto-import.json, // 指定自动导入函数 eslint 规则的文件},dts: path.resolve(pathSrc, types, auto-imports.d.ts), // 指定自动导入函数TS类型声明文件路径}),Components({dts: path.resolve(pathSrc, types, components.d.ts), // 指定自动导入组件TS类型声明文件路径}),
]项目中 四整合 Element Plus
参考 element plus 按需自动导入
需要完成上面一节的 自动导入 的安装和配置
4.1安装 Element Plus
npm install element-plus
4.2配置 import { defineConfig } from vite; // Vite 配置方法
import vue from vitejs/plugin-vue; // Vite 官方的 Vue 插件import { fileURLToPath, URL } from node:url;import Components from unplugin-vue-components/vite; // 自动导入 Vue 组件
import AutoImport from unplugin-auto-import/vite; // 自动导入 Vue 相关 API
import { ElementPlusResolver } from unplugin-vue-components/resolvers; // Element Plus 组件解析器// https://vite.dev/config/
export default defineConfig({plugins: [// Vue.js 插件vue(),// 自动导入常用的 Vue API比如 ref 和 vue-routerAutoImport({imports: [vue, vue-router], // 自动导入 Vue 和 Vue Router 的 APIresolvers: [ElementPlusResolver()], // 自动导入 Element Plus 的 APIeslintrc: {enabled: true, // 启用 ESLint 配置生成filepath: ./.eslintrc-auto-import.json, // 指定一个生成的 ESLint 配置文件路径},}),// 自动导入组件如 Element Plus 组件Components({resolvers: [ElementPlusResolver()],}),],// 模块解析配置resolve: {alias: {// 将 别名映射到 src 目录简化导入路径: fileURLToPath(new URL(./src, import.meta.url)),},},
});4.3测试
divel-button typesuccessSuccess/el-buttonel-button typeinfonfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/div 五Element Plus主题色定制通过scss变量替换方案 一款CSS预处理语言SCSS 是 Sass 3 引入新的语法其语法完全兼容 CSS3并且继承了 Sass 的强大功能。 如果通过scss变量替换方案来定制Element Plus主题色按照如下步骤
安装sass使用命令npm install sass -D准备定制样式文件在项目下面新增文件styles/themeVar.scss对Element Plus样式进行覆盖通知Element Plus采用scss语言再导入定制的scss文件覆盖 5.1安装依赖
npm i -D sass
5.2新建文件/src/styles/themeVar.scss并定义scss变量 /* 自定义 element-plus 主题 */
forward element-plus/theme-chalk/src/common/var.scss with ($colors: (white: #ffffff,black: #000000,primary: (base: #69642c,),success: (base: #0e4600,),warning: (base: #e7c79f,),danger: (base: #fd0000,),error: (base: #440303,),info: (base: #3aa176,)),
);5.3vite.config.js
1自动导入配置
配置Element Plus采用saas配色系统
将vite.config.js文件中的Components修改为如下形式 Components({resolvers: [// 配置Element Plus采用saas样式配色系统ElementPlusResolver({ importStyle: sass }),],})
2自动导入定制化样式文件进行样式覆盖
export default defineConfig(({ command, mode }) {// ...return {//...css: {preprocessorOptions: {scss: {// 按需导入自定义主题additionalData: use /styles/themeVar.scss as *;}}},}
})
5.4 测试
修改配置后执行npm run dev重启info按钮的主题色修改为绿色了 六reset.scss 整合到vue3中 测试 reset.scss *,
*::before,
*::after {box-sizing: border-box;margin: 0;font-weight: normal;
}html {box-sizing: border-box;width: 100%;height: 100%;line-height: 1.5;tab-size: 4;text-size-adjust: 100%;
}body {width: 100%;height: 100%;margin: 0;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,Microsoft YaHei, 微软雅黑, Arial, sans-serif;line-height: inherit;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizelegibility;
}html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;box-sizing: border-box; /* Ensure padding and borders are included in element sizes */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
/* 使表格兼容safari不错位 */
.el-table__body {width: 100%;table-layout: fixed;
}七 整合svg 通过 vite-plugin-svg-icons 插件整合 Iconfont 第三方图标库实现本地图标 八整合 Pinia Pinia 是 Vue 的专属状态管理库它允许你跨组件或页面共享状态。 参考Pinia 官方文档
8.1安装依赖
npm install pinia
npm install pinia-plugin-persistedstate // 持久化插件
8.2 数据持久化 import { createPinia } from pinia
import piniaPluginPersistedstate from pinia-plugin-persistedstateconst pinia createPinia()
pinia.use(piniaPluginPersistedstate) // 数据持久化export default pinia8.3main.ts 引入 pinia
// src/main.ts
import { createPinia } from pinia;
import App from ./App.vue;createApp(App).use(createPinia()).mount(#app);
8.3定义 Store
根据 Pinia 官方文档-核心概念 描述 Store 定义分为选项式和组合式 , 先比较下两种写法的区别
选项式 Option Store组合式 Setup Store
至于如何选择官方给出的建议 选择你觉得最舒服的那一个就好 。
这里选择组合式新建文件 src/store/counter.ts
// src/store/counter.ts
import { defineStore } from piniaexport const useCounterStore defineStore(counter,() {const count ref(0)const doubleCount computed(() count.value * 2)function increment() {count.value}function decrement() {count.value--}return {count,doubleCount,increment,decrement}},{persist: {// 不需要持久化配置项 persist: falseenabled: false,storage: sessionStorage, // 可以是 localStorage, sessionStorage 或 window.localStoragekey: counter_key // 状态的键名}}
)父组件
!-- src/App.vue --
script setup langts
import HelloWorld from /components/HelloWorld.vue;import { useCounterStore } from /stores/counter.ts;
const counterStore useCounterStore();
/scripttemplateh1 classtext-3xlvue3-element-admin-父组件/h1el-button typeprimary clickcounterStore.incrementcount/el-buttonHelloWorld /
/template子组件
!-- src/components/HelloWorld.vue --
script setup langts
import { useCounterStore } from /stores/counter.ts;
const counterStore useCounterStore();
/scripttemplateel-card classtext-left text-white border-white border-1 border-solid mt-10 bg-[#242424] template #header 子组件 HelloWorld.vue/templateel-formel-form-item label数字 {{ counterStore.count }}/el-form-itemel-form-item label加倍 {{ counterStore.double }}/el-form-item/el-form/el-card
/template
效果预览 九环境变量 Vite 环境变量主要是为了区分开发、测试、生产等环境的变量 参考 Vite 环境变量配置官方文档
env配置文件
项目根目录新建 .env.development 、.env.production 开发环境变量配置.env.development
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE vue3-element-admin
VITE_APP_PORT 3000
VITE_APP_BASE_API /dev-api
生产环境变量配置.env.production
VITE_APP_TITLE vue3-element-admin
VITE_APP_PORT 3000
VITE_APP_BASE_API /prod-api
十反向代理解决跨域
跨域原理
浏览器同源策略: 协议、域名和端口都相同是同源浏览器会限制非同源请求读取响应结果。
本地开发环境通过 Vite 配置反向代理解决浏览器跨域问题生产环境则是通过 nginx 配置反向代理 。
vite.config.ts 配置代理 表面肉眼看到的请求地址: http://localhost:3000/dev-api/api/v1/users/me
真实访问的代理目标地址: http://vapi.youlai.tech/api/v1/users/me 十一 vue-router 静态路由
11.1安装 vue-router
npm install vue-routernext 11.2全局注册路由实例
// main.ts
import router from /router;app.use(router).mount(#app) 11.3路由实例 views中创建DemoView.vue。Home 创建路由实例 import { createRouter, createWebHistory } from vue-router
import HomeView from /views/HomeView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView},{path: /demo,name: demo,// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(../views/DemoView.vue)}]
})export default router11.4测试
src/App.vue
script setup langts
onMounted(() {console.log(hello world1);
});
/scripttemplateel-config-provider :localezhCnheaderdiv classwrappernavRouterLink to/Home/RouterLink span|/spanRouterLink to/demodemo/RouterLink/nav/div/headerRouterView //el-config-provider
/templatestyle scoped/style
