vite构建vue3项目

vue2建议的  构建工具  webpack  +  脚手架  @vue/cli    运行项目  npm run serve 

vue3建议的  构建工具   vite  +  脚手架  create-vue   运行项目  npm run dev

----------- 使用vite搭框架(没有router和pinia) --------------
1, 全局安装vite构建工具
    cnpm i create-vite -g   /  yarn add create-vite -g
2, 使用vite构建vue项目
    npm init vite@latest
3, 安装默认依赖 (cd进入项目根目录)
    cnpm i
4, 运行项目
    npm run dev

----------- 使用create-vue搭框架(可选router和pinia) --------------
1, 全局安装create-vue脚手架 
    cnpm i create-vue -g   /   yarn add  create-vue -g
2, 使用create-vue构建vue项目
    npm init vue@latest
3, 安装默认依赖 (cd进入项目根目录)
    cnpm i
4, 运行项目
    npm run dev
注意: create-vue 要求nodejs版本在v16及以上 ,否则运行报错

----------- 配代理 -------------
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: "./",
  server: {
    host: "localhost",
    open: true,
    port: 8080,
    proxy: {
      "/myDouyu": {
        target: "http://open.douyucdn.cn",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/myDouyu/, '')
      }
    }
  }
})

------------ 配路由 --------------
1, 安装路由
  cnpm i vue-router    /    yarn add vue-router
2, 创建路由文件 @/router/index.js
  import { createRouter, createWebHistory } from 'vue-router'
  const routes = [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue')
    }
  ]
  const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes
  })
  export default router
3, main.js中导入挂载路由
  import router from './router'
  createApp(App).use(router).mount('#app')
4, 在App.vue中管理路由
  <router-view/>

------------ 状态管理pinia ---------
1, 安装pinia
  cnpm i pinia    /    yarn add pinia
2, 在main.js中导入pinia并挂载
  import { createPinia } from "pinia";
  const pinia = createPinia()
  createApp(App).use(pinia).mount('#app')
3, 创建状态管理仓库文件 @/store/index.js
  import { defineStore } from "pinia";
  export const useStore = defineStore("users", {
      state: () => {
          return {
              name: 'luoluo'
          }
      }
  })
4, 在组建中导入仓库
  import { useStore } from "./store/index.js";
5, 读取仓库中的数据
  const store = useStore()
  {{store.name}}
  // 或者
  import { storeToRefs } from "pinia";
  const {name} = storeToRefs(store)
  {{name}}
6, 修改仓库的数据
  const store = useStore()
  store.name = '无法议案'
  // 或者一次修改多个值
  store.$patch(state=>{
    state.name = '物业覅按',
    state.age = 30
  })
7, 重置仓库, 还原为 初始值
  store.$reset()
8, getters 状态属性的配置与读取
  getters: {
    newName(state){
      return state.name+1
    }
  }
  {{store.newName}}
9, actions 函数的定义与调用
  actions: {
    setName(data){
      this.name = data
    }
  }
  store.setName("fanfan")

------------ 预处理器 Sass ----------
1, 安装sass
  cnpm i sass sass-loader   /   yarn add sass sass-loader
2, 在style中使用sass语法
  <style scoped lang="scss">

------------ 组件库element-plus ----------
1, 安装 element-plus 
  cnpm i element-plus    /   yarn add element-plus 
  cnpm i @element-plus/icons-vue
2, 在main.js中引入
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  mport * as ElementPlusIconsVue from '@element-plus/icons-vue'
  import zhCn from "element-plus/lib/locale/lang/zh-cn"
  createApp(App).use(ElementPlus, {locale: zhCn}).mount('#app')