使用vite创建vue3项目

安装Nodejs（版本>=12）

全局安装vite

npm install -g create-vite-app

创建vue项目

yarn create @vitejs/app my-vue-name --template vue  //yarn(本文使用yarn)  

经过上面操作，vue项目基本框架完成，再根据以下命令安装依赖并运行即可

备注：其他创建方式：

• 不使用模板

npm init @vitejs/app 
//或者
yarn create @vitejs/app

• 使用模板

npm init @vitejs/app my-vue-name --template vue  //npm 6.x
npm init @vitejs/app my-vue-name -- --template vue  //npm 7+

引入UI框架（Element Plus）

• 全局引入
  安装

npm install element-plus --save
//或者
yarn add element-plus

引入注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

• 自动按需引入
  安装

yarn add element-plus vite-plugin-style-import vite-plugin-components

在vite.config.js中配置插件

import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import ViteComponents, {
  ElementPlusResolver
} from 'vite-plugin-components'

export default defineConfig({
  plugins: [
    vue(),
    ViteComponents({
      customComponentResolvers: [ElementPlusResolver()],
      }),
      //按需导入element-plus的css样式
      styleImport({
      libs: [
          {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: name => {
              return `element-plus/lib/theme-chalk/${name}.css`
          },
          },
      ],
      }),
  ]
})

安装样式插件less/scss

• 安装插件即可使用
  例:<style lang="scss">

//scss
yarn add sass sass-loader
//less
yarn add less less-loader

• 公共样式
  创建公共样式文件src/assets/css/global.scss

//公共样式
$base-color:orange

在vite.config.js配置公共样式

export default defineConfig({
	...
	css: {
	    preprocessorOptions: {
	      scss: {
	        additionalData: '@import "./src/assets/css/global.scss";'//注意此处分号
	      },
	    },
	 }
})

配置路由vue-router

• 安装vue-router(注意版本)

yarn add vue-router@4

• 创建路由文件src/router/index.js
  （创建路由中引用到的文件）

import { createRouter, createWebHashHistory } from "vue-router"
const routes = [
    {
        path: "/",
        redirect: "/layout",
    }, 
    {
        path: "/layout",
        component: () => import("../views/Layout.vue"),
        children:[
            {
                path: "index",
                component: () => import("../views/Index.vue")
            },{
                path:"detail",
                component: () => import("../views/Detail.vue")
            }
        ]
    }
    
]
const router = createRouter({
    history: createWebHashHistory(),//路由模式hash
    routes
})
export default router

• 在App.vue文件和Layout文件都需要放置路由出口

<router-view/>

• 在main.js中引入router/index.js并注册使用

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"//引入router文件

createApp(App).use(router).mount('#app')

• 实现点击导航页面切换
  vue3的组合API中不能通过this拿到router和route，需要通过useRouter()和useRoute()

<!-- Layout.vue -->
<template>
  <nav>
    <span v-for="{path,title} in nav"
      :key="path"
      :class="{active:path===route.path}"
      @click="changeRouter(path)">{{title}}</span>
  </nav>
  <!-- 路由出口 -->
  <router-view />
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const nav = reactive([
  {
    path: "/layout/index",
    title: "首页",
  },
  {
    path: "/layout/detail",
    title: "详情",
  },
]);
const changeRouter = (path) => {
  router.push(path);
};
</script>

<style lang="scss">
nav {
    margin-bottom: 10px;
  span {
    cursor: pointer;
    &.active{
        color: $base-color;
    }
    &:first-child {
      margin-right: 50px;
    }
  }
}
</style>

配置vuex

• 安装vue-router(注意版本)

yarn add vuex@4

• 创建路由文件src/store/index.js

import { createStore } from "vuex"
const store=createStore({
    state:{
        count:0
    },
    mutations:{
        setCount(state,payload){
            state.count=payload
        }
    }
})
export default store

• 在main.js中引入store/index.js并注册使用

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"//引入router文件
import store from "./store"//引入store文件
createApp(App).use(router).use(store).mount('#app')

• 测试store（点击按钮让store中的count+1）
  vue3的组合API不能通过this直接拿到store，需要使用useStore()

<template>
    index Page
    <br>
    <el-button @click="increaseCount">store中的count+1</el-button>
    <p>count={{state.count}}</p>
</template>

<script setup>
import {useStore} from "vuex"
// const store=useStore()
const {state,commit}=useStore()
const increaseCount=()=>{
    commit("setCount",state.count+1)
}
</script>

<style lang="scss">

</style>

参考地址：
https://v3.cn.vuejs.org/
https://element-plus.gitee.io/zh-CN/