Vue3脚手架搭建（一）

一、环境安装

1、安装vue

# 最新稳定版 $ npm install vue@next

二、根据vite 创建项目

# npm 6.x $ npm init vite@latest <project-name> --template vue # npm 7+，需要加上额外的双短横线 $ npm init vite@latest <project-name> -- --template vue $ cd <project-name> $ npm install $ npm run dev

或者yarn

$ yarn create vite <project-name> --template vue   $ cd <project-name>   $ yarn   $ yarn dev

三、vue-router4 安装和配置

一、安装

npm

npm install vue-router@4

yarn

yarn add vue-router@4

二、创建文件名router/index.js

import { createWebHistory, createRouter } from 'vue-router' // createWebHistory  相当于router3的 'history'  '/index' // createWebHashHistory 相当于router3的 'hash'   '/#/index' // 公共路由 export const constantRoutes = [   {     path: '/login',     component: () => import('../views/login.vue'),     hidden: true   },   {     path: "/:pathMatch(.*)*",     component: () => import('../views/error/404.vue'),     hidden: true   },   {     path: '/401',     component: () => import('../views/error/401.vue'),     hidden: true   }, ]; const router = createRouter({   history: createWebHistory(),   routes: constantRoutes,   scrollBehavior(to, from, savedPosition) {     if (savedPosition) {       return savedPosition     } else {       return { top: 0 }     }   }, }); export default router;

三、main.js 注册

import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')

// 修改app.vue文件 <template>   <router-view /> </template>

四、导入函数（rouer 的使用）

import { useRoute, useRouter } from 'vue-router'

五、注释

// 返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。 const $route = useRoute()  // 返回当前路由地址 // 返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。 const $router = useRouter() // 返回 router 实例 // 执行路由跳转等功能 $router.push('/')

六、监听当前路由发生变化

watch($route, () => {     // $route     // 路由发生改变 })

四、pinia安装和配置（相当于vuex)

一、Pinia 的优点

• 简便，存储和组件变得很类似，你可以轻松写出优雅的存储。

• 类型安全，通过类型推断，可以提供自动完成的功能。

• vue devtools 支持，可以方便进行调试。

• Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。

• 模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。

• 非常轻巧，只有大约 1kb 的大小。

• 服务器端渲染支持。

二、安装

yarn add pinia@next

三、注册main.js

import {createPinia} from 'pinia' app.use(createPinia()) // 注册

四、创建一个user 库

// 引入 defineStore import {defineStore} from 'pinia' const useUserStore = defineStore('user',{     state:()=>({         name: '',         userId:'',         avatar: '',         roles: [],         user:null,     }),     actions:{         // 退出         logOut() {           // 使用 state 通过this           return new Promise((resolve, reject) => {             logout(this.token).then(() => {               this.token = ''               this.roles = []               this.permissions = []               resolve()             }).catch(error => {               reject(error)             })           })         }     } }) // 导出 export default useUserStore

五、在vue文件下使用

// 使用 state import useUserStore from '@/store/modules/user' // 引用user文件 const userStore = useUserStore() const userID = computed(() => userStore.userId); // 使用actions useUserStore().logOut().then(res=>{})

五,Vite.config 基础配置

一、Vite.config基础配置

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const path = require('path') function pathResolve(dir) {   return resolve(__dirname, ".", dir); } import { resolve } from 'path' // 主要用于alias文件路径别名 // Configuring Vite | Vite export default defineConfig({   plugins: [vue()],   // 是否自动在浏览器打开   open: true,   // 是否开启 https   https: false,   // 服务端渲染   ssr: false,   /**    * 在生产中服务时的基本公共路径。    * @default '/'    */   base: './',   /**    * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。    * @default 'dist'    */   outDir: 'dist',   resolve: {     alias: {       '@': pathResolve("src"),       // 键必须以斜线开始和结束       // "/@/": path.resolve(__dirname, "./src"),     },   },   // 引入第三方的配置   //   optimizeDeps: {   //     include: ["moment", "echarts", "axios", "mockjs"],   //   },   // 打包配置   build: {     target: 'modules',     outDir: 'dist', //指定输出路径     assetsDir: 'assets', // 指定生成静态资源的存放路径     minify: 'terser', // 混淆器，terser构建后文件体积更小   },   // 本地运行配置，及反向代理配置   server: {     port: 8089,     host: "0.0.0.0",     // 是否开启 https     https: false,     cors: true, // 默认启用并允许任何源     open: true, // 在服务器启动时自动在浏览器中打开应用程序     //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑     proxy: {       '/api': {         target: 'http://192.168.99.223:3000', //代理接口         changeOrigin: true,         rewrite: (path) => path.replace(/^\/api/, ''),       },     },   }, })