vite+vue3+element-plus项目搭建的方法步骤

使用vite搭建vue3项目

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

$ npm init vite-app 
$ cd 
$ npm install
$ npm run dev

引入Element Plus

安装Element Plus:

npm install element-plus --save

main.js中完整引入 Element Plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

引入SCSS

执行命令安装sass， npm i sass -D， 然后在vue文件的style标签下加入lang="scss"即可，这些与以前vue2都是一样的。

npm i sass -D

引入eslint

安装eslint

npm i eslint -D

使用eslint对本项目进行初始化

npx eslint --init

按照提示进行设置，这是我选择的设置

引入vue-router

安装Vue Router 4

npm install vue-router@4

在src目录下新建router文件夹，并在router下新建index.js进行路由配置

import * as VueRouter from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../page/Home.vue')
  }, {
    path: '/login',
    component: () => import('../page/Login.vue')
  }
]

export default VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

在main.js下使用该中间件

import router from './router'
//...
app.use(router)

引入vuex

安装vuex

npm install vuex@next --save

在src下创建store路径，并在store下创建index.js

import { createStore } from 'vuex'

export default createStore({
  state () {
    return {
      username: ''
    }
  },
  mutations: {
    setUserName (state, payload) {
      state.username = payload
    }
  }
})

在main.js下使用store

import vuex from './store'
//...
app.use(vuex)

引入axios

对于网络请求，这里使用axios，首先安装axios

npm i axios

在src目录下创建api目录，并在api路径下创建axios.js，配置axios实例

// axios.js
import axios from 'axios'
// import config from '../../config'
import { useRouter } from 'vue-router'

export default function () {
  // 1. 发送请求的时候，如果有token，需要附带到请求头中
  const token = localStorage.getItem('token')
  let instance = axios

  if (token) {
    instance = axios.create({
      // baseURL: config.server,
      headers: {
        authorization: 'Bearer ' + token
      }
    })
  }

  const router = useRouter()
  instance.interceptors.response.use(
    (resp) => {
      // 2. 响应的时候，如果有token，保存token到本地（localstorage）
      if (resp.data.data.token) {
        localStorage.setItem('token', resp.data.data.token)
      }
      // 3. 响应的时候，如果响应的消息码是403（没有token，token失效），在本地删除token
      if (resp.data.code === 403) {
        localStorage.removeItem('token')
        localStorage.removeItem('username')
        router.push({ name: 'Login' })
      }
      return resp
    },
    (err) => {
      return Promise.reject(err)
    }
  )

  return instance
}

在api路径下创建index.js编写api

import request from './axios.js'
import config from '../../config'
export default {
  // 登录
  login (params) {
    return request().post(`${config.server}/login`, params)
  },
  // 获取用户列表
  getUserList (params) {
    return request().get(`${config.server}/user/list`, {
      params: params
    })
  },
  // 添加一个用户
  createUser (params) {
    return request().post(`${config.server}/user/`, params)
  },
  //...

接下来使用vue3的composition api进行组件的开发，这里列举一个User模块的开发:

到此这篇关于vite+vue3+element-plus项目搭建的方法步骤的文章就介绍到这了,更多相关vite搭建vue3+ElementPlus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！