vue3.x全家桶+vite（一）环境搭建

时隔多年我又回来啦！！记录一下自己的vue3学习

安装配置

vite跳转
https://vitejs.cn/guide/#scaffolding-your-first-vite-project

初始化

npm init vite@latest

yarn create vite

学习还是使用js哈，我们不选择vue+ts 后面应该会记录一下怎么使用

1.VS Code 的官方扩展插件 Volar，这个插件给 Vue 3 提供了全面的开发支持，记得安装
2. 项目生成后 进入目录执行yarn 或者npm i 安装模块
3.代码爆红 eslint的问题，可以设置文件首选项搜索eslint关闭

image.png

接下来执行npm run dev 启动项目即可，下面的是我的src配置，可以参考

├── src
│ ├── api 数据请求
│ ├── assets 你的静态资源
│ ├── components 组件
│ ├── view 页面
│ ├── router 路由
│ ├── store vuex配置
│ └── utils 工具函数

配置一下vite.config.js

可能比较接近当初vue-cli的配置，后面再按需添加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  server: {
    port: 3001, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    // 代理
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

router vuex安装

npm install vue-router@next vuex@next
yarn add vue-router@next vuex@next

我的当前版本

  "dependencies": {
    "vue": "^3.2.16",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  }

创建router文件

https://next.router.vuejs.org/zh/introduction.html

创建 src/router/index.js 文件，创建路由时，建议使用路由懒加载，优化访问性能

    import { createRouter, createWebHistory } from 'vue-router'

    const routes = [
        {
            path: '/',
            name: 'Home',
            component: () => import('@/views/Home.vue')
        },
        {
            path: '/about',
            name: 'About',
            component: () => import('@/views/About.vue')
        }
    ]

    const router = createRouter({
       // createRouter 用来新建路由实例，
       // createWebHashHistory 用来配置我们内部使用 hash 模式的路由，
       // 也就是 url 上会通过 # 来区分
        history: createWebHistory(),
        routes
    })

    export default router

在 main.js 文件中 vue 示例中 use router

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

默认生成的APP.vue是没有router-view的哈，我们需要修改一下原代码

<template>
  <router-view></router-view>
</template>

此时我们修改我们的url

image.png

那就说明我们的router引入配置成功

<template>
  <div>
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

再次修改代码，简单的一个导航就做好了