vue3+vite的项目构建
Sonder
2023-04-04
3336字
8分钟
浏览 (1.8k)
创建vite项目
根据vite官方文档 来创建一个基础的模板
npm create vite@latest安装vue-router
npm install vue-router@4使用方式:
vue-router4+在使用方式上与之前的版本有了些许差别,具体体现在了创建方式,以及模式切换上
声明方式：
import { createRouter } from 'vue-router'
// routes的书写形式与之前相比并无变化
const routes = [
{
path: '/',
component: () => import('../components/HelloWorld.vue')
}
]
// 新的router采用的导入 createRouter() 的方式来创建router实例
const router = createRouter({
routes
})模式切换: 对于路由,我们所知是有两种不同的历史记录模式 Hash模式 和 HTML5模式(history模式)
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 同样是以导入的形式,导入 Hash模式createWebHashHistory() 或 HTML5模式createWebHistory() 来进行使用
const router = createRouter({
history: createWebHashHistory() 或 createWebHistory(),
routes
})当然创建实例后,需要在main.js里进行挂载才能进行使用
安装pinia
pinia是一个类似vuex的插件。它是最新一代的轻量级状态管理插件,已经正式加入了vue全家桶
pinia的优点:
- 非常简便，存储和组件变得很类似，你可以轻松写出优雅的存储。
- 类型安全，通过类型推断，可以提供自动完成的功能。
- vue devtools 支持，可以方便进行调试。
- Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。
- 模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。
- 非常轻巧，只有大约 1kb 的大小。
- 服务器端渲染支持
安装方式：
npm install pinia使用方式：
pinia与vuex一样也有着 state, getters, actions. 在pinia中抛弃了vuex中的mutation,并且action支持同步和异步
首先修改main.js，引入pinia提供的createPinia方法，创建根存储
// main.js
import { createPinia } from 'pinia'
app.use(createPinia())store.js中使用pinia提供的 defineStore() 来构建一个store,该store用来存放我们需要全局使用的数据
import { defineStore } from 'pinia'
// defineStore()会接收两个参数：
// name：一个字符串，必传项，该store的唯一id
// options：一个对象，store的配置项,属性包含state,getters,actions
export const useUserStore = defineStore('user', {
state: ()=> {
return {
count: 0
}
},
getters: {
getCount: (state)=> {
return state.count + 1
}
},
actions: {
setCount(count){
this.count = count
}
}
})安装element-plus
npm install element-plus --save我这里使用的官方介绍的全局引入的方式
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
const app = createApp(App)
// 在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale: zhCn })特别要注意一点,elementPlus中使用icon不再由element-plus包内提供. 因此,之前通过@element-plus/icons-vue来直接引入使用的方式会发生错误
@element-plus/icons-vue被分离出来作为一个单独的包,如果有需要使用icon,那么需要进行安装
推荐：也可以看我这篇文章，使用组件封装icon，更便捷：vue3 封装element图标组件
npm install @element-plus/icons-vue完整main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { createPinia } from 'pinia'
const app = createApp(App)
// 在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。
// size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale: zhCn })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.config.globalProperties.$msg = '挂上全局提示'
app.use(router)
app.use(createPinia())
app.mount('#app')