VUE3 + TS + PINIA + LESS + AXIOS + VUE-ROUTER + ELEMENT-PLUS创建完整项目并配置完成全步骤

1、创建项目

使用npm

• 方式1：

npm init vite@latest

• 方式2：

 npm init vite@latest my-vue-app -- -- template vue

说明： my-vue-app 为所创建项目名称 ；template vue为创建一个项目模板

使用yarn

yarn create vite

使用pnpm

pnpm create vite

效果

2、pinia安装及使用

安装

npm install pinia

使用

• 在main.ts或main.js文件中引入pinia并创建容器挂载到根实例上

  import { createPinia } from 'pinia'
  const app = createApp(App)
  const pinia = createPinia()
  // pinia使用
  app.use(pinia)
  

• 在store/index.ts中定义 store

  import { defineStore } from "pinia" // 定义容器
  
  export const useMain = defineStore('useStore', {
    /**
     * 存储全局状态
     * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
     * 和 TS 类型推导
    */
    state: () => {
      return {
        count: 0,
        list: [1, 2, 3, 4 ]
      }
    },
    /**
     * 用来封装计算属性 有缓存功能  类似于computed
     */
    getters: {
      
    },
    /**
     * 编辑业务逻辑  类似于methods
     */
    actions: {
  
    }
  
  })
  

pinia 页面使用demo

• script标签中

  import { useMain } from '../store' // 引入store
  
  const useStoreMain = useMain()
  

• template标签中

  <h1>{{ useStoreMain.count }}</h1>
  

pinia持久化插件

• 安装

  npm install pinia-plugin-persist
  

• 使用

  //pinia持久化插件
  import piniaPluginPersist from 'pinia-plugin-persist'
  const pinia = createPinia()
  pinia.use(piniaPluginPersist)
  

3、安装less及使用

安装

npm install less --save-dev

配置vite.config.js

css: {
    preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "pink",
        },
      },
    },
  },

使用

<template>
  <div class="box">
    <h1>{{ count }}</h1>
  </div>
</template>

<style scoped lang="less">
.box {
  h1 {
    font-weight: 700;
    color: @mainColor; //全局变量使用
  }
}
</style>

4、vue-router安装及使用

安装

npm install vue-router

使用

• 创建 router 文件夹，创建 index.ts 文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    // alias: ['/home','/home2'],   // 别名，可以定义很多个
    component: () => import('../components/HelloWorld.vue'),
    // 重定向
    // redirect: '/welcome',
  },
]

const router = createRouter({
//   history: createWebHistory(),// history传统模式
  history: createWebHashHistory(), // hash模式
  routes
})

export default router

• 在 main.ts 中引入并注册

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

路由简单应用

import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route, 'route');

5、axios安装及使用

安装

npm install axios

6、vue+ts设置@别名

• vite.config.ts配置

  /**
  * npm i @types/node 当报找不到path模块是安装
  */
  import * as path from 'path'
  
  /**defineConfig */
  // 设置路径别名
    resolve: {
      alias: [
        {
          find: '@',
          replacement: path.resolve('./src')
        }
      ]
    }
  

• tsconfig.json配置

  // 别名路径配置
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"]
      }
  

7、element-plus安装

安装

• 官方文档

• 引入方式可查看官方文档中的相关内容，选择所需的引入形式

npm install element-plus --save

如：自动引入

• 插件安装

  npm install -D unplugin-vue-components unplugin-auto-import
  

• vite.config.ts文件配置

  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'
  
  // defineConfig 对象函数中
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  

自动引入注意事项：

• 当时使用时代码中报警告时（运行正常），当安装好自动引入插件后，并使用相关的组件后会自动创建一个名为auto-imports.d.ts文件（如果自动引入并使用后并没有相关文件可自行创建）。

• auto-imports.d.ts文件内容

  export {}
  declare global {
    const ElMessage: typeof import('element-plus/es')['ElMessage']
  }
  

• 在tsconfig.json文件中的include值中将’auto-imports.d.ts’文件名添加进去，如下：

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"],
  

内容

export {}
declare global {
  const ElMessage: typeof import('element-plus/es')['ElMessage']
}

• 在tsconfig.json文件中的include值中将’auto-imports.d.ts’文件名添加进去，如下：

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"],
  

• 操作完成上面两步代码页面中红色波浪线警告即可解决，后面有新的相关组件保存之后会自动添加进去。