img

vue3+vite的项目构建

2023-04-04 0条评论 1.2k次阅读 JavaScript


创建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')

转自:https://blog.xingyijun.cn/artDetail?id=8

💬 COMMENT


🦄 支持markdown语法

👋友