vite构建vue3项目

！注意：

vue2建议：  构建工具  webpack  +  脚手架  @vue/cli    运行项目  npm run serve || cnpm run derve || yarn serve 

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

create-vue 要求nodejs版本在v16及以上 ,否则运行报错。

--------------------------------------- 使用vite搭框架(没有router和pinia) -----------------------------------------

① 全局安装vite构建工具
    cnpm i create-vite -g   /  yarn add create-vite -g
② 使用vite构建vue项目
    npm init vite@latest
③ 安装默认依赖 (cd进入项目根目录)
    cnpm i
④ 运行项目
    npm run dev || cnpm run dev || yarn dev 

配置路由：

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";

预处理Sass：

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

----------------------------- 使用create-vue搭框架(可选Router和Pinia和Sass) ------------------------------

① 全局安装create-vue脚手架 
    cnpm i create-vue -g   /   yarn add  create-vue -g
② 使用create-vue构建vue项目
    npm init vue@latest
③ 安装默认依赖 (cd进入项目根目录)
    cnpm i
④ 运行项目
    npm run dev || cnpm run dev || yarn dev 

-------------------------------------------------- 组件库element-plus ------------------------------------------------- 
① 安装 element-plus 
  cnpm i element-plus    /   yarn add element-plus 
  cnpm i @element-plus/icons-vue
② 在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')