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中管理路由

------------ 状态管理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')