vue-vite-ts

vue3多入口模板

1. html自动对应各自入口文件（router，store）互不影响，即单独加载，共享数据，建议使用yarn安装依赖
2. eslint自动校验修正，无需IDE修正

建议使用setup方式（Composition API）,请注意书写格式!

import { onMounted, ref, computed} from 'vue'
<script setup>
    <!-- data 数据声明区 -->
      exp:
        const test=ref(1)
        const test1:computed(()=>test)

    <!-- function 调用区 -->
      exp:
       const test= ()=>{
          console.log(123)
        }

    <!-- 单独生命周期监听区 -->
      exp:
        onMounted(() => {test()})
</script>

鼓励使用option api 方式

export default {
    props:{name:String},

    <!-- 注意setup 和 data 使用其一即可 -->
    setup(){
      const test= ref(1)
      return { test }
    },

    <!-- 注意setup 和 data 使用其一即可 -->
    data() {
        return {
          greeting: 'Hello World!'
        }
    },

    mounted(){
      console.log(123)
    }
}
</script>

use

yarn

yarn add model_exp

yarn dev

yarn build

pinia 使用方法注意ID是唯一

<!-- 参考：https://blog.csdn.net/u012384510/article/details/122007683 -->


<!-- vue3写法 -->
import { ref, computed } from "vue"
import { defineStore } from "pinia"
const useCounterStore = defineStore('counter', function () {
   const count = ref(0)
   const double = computed(() => count.value * 2)
   function increment() {
     count.value++
   }
   return {
    count, double, increment
   }
 })
export default useCounterStore

<!-- vue3  用法 -->
import { useCounterStore } from '../stores/counter'
const counter = useCounterStore()
counter.count



<!-- vuex 写法 -->
import { defineStore } from 'pinia'
const useStore = defineStore({
  id: 'login', // id必填，且需要唯一
  state: () => ({
    loading: false
  }),
  getters: {

  },
  actions: {
    setLoading(state) {
      this.loading = state
    }
  }
})
export default useStore

<!-- vue2 用法 -->
import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'

<!-- 计算属性 -->
...mapState(useCounterStore, ['count', 'double']) 读取字段
...mapActions(useCounterStore, ['increment']) 读取方法
...mapWritableState(useStore, [ 'loading' ]) 读写字段

目录结构

| - `src`
|   - `pages`                     全局入口目录
|       - `index`                 首页入口子目录
|           - `assets`            子静态文件
|           - `components`        子组件
|           - `router`            子路由
|           - `store`             子存储
|           - `App.vue`           子模板
|           - `main.js`           子入口文件
|       - `admin`                 后台管理入口子目录
|           - `assets`            子静态文件
|           - `components`        子组件
|           - `router`            子路由
|           - `store`             子存储
|           - `App.vue`           子模板
|           - `main.js`           子入口文件
|       - `login`                 登录入口子目录
|           - `assets`            子静态文件
|           - `components`        子组件
|           - `router`            子路由
|           - `store`             子存储
|           - `App.vue`           子模板
|           - `main.js`           子入口文件
|   - `components`                全局组件
|   - `utils`                     全局插件
|   - `assets`                    全局静态文件

注意

1. 多页面路由模式不能使用 history 模式
2. 模板采用 index.html
3. 更多方法查看 utils/*.js
4. vite 使用es6
5. 默认安装:
   1. aixos
   2. js-md5
   3. pinia
   4. vue-router
   5. less
   6. echarts5.3.3
   7. view-ui-plus   
6. eslintignore 增加排除文件
7. echarts 使用import * as echarts from 'echarts'
8. 组件嵌套层级超过3层建议使用 provide/inject 方式