从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts

项目启动

初始化vue3项目

1. 这里建议先下载pnpm，下载速度更快，如果还没下载可以使用
   npm install -g pnpm
   如果遇到报错问题，如下
   

可以在命令行输入下面的指令以切换到淘宝镜像源
npm config set registry https://registry.npm.taobao.org

2. 创建项目
   命令行输入pnpm create vue

根据自己的需要选择安装插件即可

3. 试运行
   命令行中也有提示，输入

cd vue-demo
pnpm install
pnpm dev

即可运行项目

页面中的都是vue官网链接以及一些提示，感兴趣的可以自己看看

配置Element-plus

ement-plus官网链接

1. 导入有完整导入和按需导入两种，推荐使用按需导致，减少代码包的大小
   首先安装element-plus
   pnpm install element-plus
   使用按需导入需额外下载插件
   pnpm install -D unplugin-vue-components unplugin-auto-import

2. 然后修改vite.config.js文件，导入插件

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 由于element-plus默认是英文，如需修改成中文可以如下操作

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<template>
  <!-- App.vue只需要留一个路由出口 -->
  <el-config-provider :locale="zhCn">
    <router-view></router-view>
  </el-config-provider>
</template>

配置eslint

1. 刚才初始化vue项目的时候可选配置eslint，如果没有选的在命令行输入
   pnpm install eslint

2. 下载成功后会在目录中看到 .eslint.cjs 文件，打开文件修改其中内容如下，其中内容也都可以自己按需求更改

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    //禁用格式化插件 format on save关闭
    //安装Eslint 并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    'no-undef': 'error'
  },
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

配置axios

1. 安装axios
   pnpm install axios

2. 建议在src目录中新建utils文件夹，其中新建request.js文件
   进行如下配置

import axios from 'axios'

//请求基地址
const baseURL = ''

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 1000000
})

//响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    //处理业务失败，给错误提示
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    //错误默认情况 => 只给提示就行
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

3. 请求基地址和拦截器一定要根据后端实际的接口进行修改哦！

配置router

1. 同样的，初始化项目时也可选router，没有选的话命令行输入
   pnpm install router

2. 建议在src目录中新建router文件夹，其中新建index.js文件

3. 根据自己实际的目录结构配置哦！

import { createRouter, createWebHistory } from 'vue-router'
//createRoute用于创建路由示例
//配置history模式
//1. createWebHistory  地址栏不带#
//2. createWebHashHistory   地址栏带#
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/layout/LayoutContainer.vue'),
      // 默认跳转
      redirect: '/index/UserManagement',
      children: [
        {
          path: '/index/UserManagement',
          component: () => import('@/views/index/UserManagement.vue')
        }
      ]
    }
  ]
})

export default router

配置pinia

1. 同样的，初始化项目时没有选择pinia的命令行输入
   pnpm install pinia

2. 建议在src目录中新建stores文件夹，其中新建index.js文件，再在stores中新建modules文件夹，其中新建user.js文件，在index.js中导出pinia实例

3. index.js进行如下配置，这样配置之后，页面中使用pinia就可以直接在页面中导入这个index.js文件，更加方便

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia

export * from './modules/user'

4. user.js中文件进行如下配置

import { defineStore } from 'pinia'
import { ref } from 'vue'

//本案例为用户模块，可以自己根据需要更改，demoname也根据实际修改
export const useUserStore = defineStore(
  'demoname',
  () => {
    //自定义属性名
    const token = ref('')
    //自定义方法
    const setToken = (newToken) => {
      token.value = newToken
    }
    const removeToken = () => {
      token.value = ''
    }
    //记得return暴露自定义的属性和方法
    return {
      token,
      setToken,
      removeToken
    }
  },
  //持久化
  {
    persist: true
  }
)

配置 echarts

echarts官网

1. 命令行输入，echarts就无法在项目初始化的时候直接配置了，需要手动配置
   pnpm install echarts

2. 在main.js中进行配置，即可全局挂载echarts

import './assets/main.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ECharts from 'vue-echarts' // 全局引入ECharts
import 'echarts' // 全局引入echarts
// 挂载ECharts   参数1:vue文件中挂载echarts的名字  参数2:挂载的组件

const app = createApp(App)

app.use(createPinia())
app.use(router)
//echarts
app.component('ECharts', ECharts)

app.mount('#app')

3. 如果要实现简单的echarts图表，还是前往官网查看

共勉

有不会的多去官网查找看看，大家一起加油学习吧！