搭建vue3 工程化（学习笔记）

环境准备

我们使用VS Code 写 Vue 3 的代码，直接在 Chrome 浏览器里展示，我们会在这个基础之上逐步添加新的工具。

对于 Vue 2，官方推荐用 Vue-cli 创建项目；而对于 Vue 3，我建议你使用 Vite 创建项目，因为 vite 能够提供更好更快的调试体验。在使用 Vite 之前，我们要先安装 Node.j

安装 Node.js 的过程是傻瓜式的，直接去Node.js 官网下载安装即可。

接下来，在命令行窗口里，我们对 vuejs 目录执行下面的命令，这样就可以创建一个 Vite 的初始化项目。

npm init @vitejs/app

之后，在 Project name 这一行，我们输入项目的名字，例如 geek-admin；接着，在 Select a framework 这一行输入框架的名字，这里我们选择 vue；再之后，在 select a variant 这一行，因为在项目里，我们没有选择 TS，所以这里我们依然选择 vue 即可。

完成项目初始化之后
我们所有工程化体系都是基于 Node.js 生态；我们使用 VS Code+Volar 编辑器 + 语法提示工具作为上层开发工具；使用 Vite 作为工程化工具；使用 Chrome 进行调试，这些都是 Vue 3 工程化体系的必备工具。

我们开发的项目是多页面的，所以 vue-router 和 Vuex 也成为了必选项，就像一个团队需要人员配比，Vue 负责核心，Vuex 负责管理数据，vue-router 负责管理路由。我们在 geek-admin 目录中使用下面这段代码安装 Vuex 和 vue-router。

npm install vue-router@next vuex@next

规范

我们先对几个文件夹的分层进行规定，便于管理，下面是 src 目录的组织结构。

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
	│   ├── home.vue          文件页面
		├── about.vue          文件页面
│   ├── router         路由配置
	│   ├── index.js         路由配置文件
│   ├── store          vuex数据
│   └── utils          工具函数

我们的页面需要引入路由系统，我们进入到 router 文件夹中，新建 index.js，写入下面的代码：

/**
 * 1、首先引入了 createRouter 和 createWebHashHistory 两个函数
 * 2、reateRouter 用来新建路由实例， createWebHashHistory 用来配置我们内部使用 hash 模式的路由，也就是 url 上会通过 # 来区分。
 */
import {
    
    createRouter,createWebHashHistory} from 'vue-router'

import about from '../pages/about.vue'
import home from '../pages/home.vue'

const routes = [
  {
    
    
    path:'/',
    name:'Home',
    component:home
  },{
    
    
    path:'/about',
    name:'About',
    component:about
  }
]

const router = createRouter({
    
    
  history:createWebHashHistory(),
  routes
})
export default router

创建完成后在main.js中引入配置项

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

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

在app.vue中创建对应的路由组件,routerlink-routerview

<script setup>
</script>

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

<style>
</style>

我们在浏览器中打开http://localhost:3000/，就会看到下图的页面，点击“关于”和“首页”都会有页面切换的效果。

vue3 chorme插件安装