手把手教你搭建Vue3工程化项目

1. 检查node版本

node -v

出现版本号，就可以在VS Code里进行Vue项目的开发了

2. 初始化vue3项目

npm init @vitejs/app

之后，在 Project name 这一行，输入项目的名字

Select a framework 这一行选择框架的名字，这里我们选择 vue；

在 select a variant 这一行，选择是否使用TypeScript

我们看一下 test 下面的文件目录，这个目录就是我们项目启动的骨架了。目录中的 index.html 是项目的入口；package.json 是管理项目依赖和配置的文件；public 目录放置静态资源，比如 logo 等图片；vite.config.js 就是和 Vite 相关所有工程化的配置；src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写。

 

3. 启动项目

 我们在test项目文件夹下，执行 npm install 命令，来进行依赖的安装，然后执行 npm run dev 命令来启动项目，看到如下信息就算是启动成功了。

我们根据命令行中的提示，在 Chrome 里打开http://localhost:3000/，看到如下图所示的页面时，项目就搭建成功了

4. src

完成了项目的初始化之后，我们会细化 src 目录，搭建源码的骨架架构。我们去 VS Code 里打开项目，修改一下 src 目录下的 App.vue 文件。例如，我们改动一下文件中的 HelloWorld 组件，把 msg 改成“项目搭建成功啦！ ”，之后你会发现浏览器不需要我们去刷新，首页大标题就自动更新了，这种热更新的开发体验会伴随我们整个项目开发，极大提高我们的开发效率。

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

npm install vue-router@next vuex@next

无规矩不成方圆，团队项目中的规范尤其重要。我们先对几个文件夹的分层进行规定，便于管理，下面是 src 目录的组织结构。

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

5. 路由

 pages 下面新建两个文件About.vue和Home.vue，注意，这两个文件是以 .vue 作为后缀的，这是 Vue 中单文件组件的写法，我们可以在一个文件中通过 template、script 和 style 来维护 Vue 组件的 HTML、JavaScript 和 CSS。分别输入如下内容：

// about
<template>
    <h1>这是关于页面</h1>
</template>

// home
<template>
    <h1>这是首页</h1>
</template>

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

import {
    createRouter,
    createWebHashHistory,
  } from 'vue-router'
  import Home from '../pages/home.vue'
  import About from '../pages/about.vue'
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
  
  export default router
  

上面的代码中，我们首先引入了 createRouter 和 createWebHashHistory 两个函数。createRouter 用来新建路由实例， createWebHashHistory 用来配置我们内部使用 hash 模式的路由，也就是 url 上会通过 # 来区分。之后在上面的代码里，我们引入两个组件 Home 和 About，根据不同的访问地址/ 和/home  去渲染不同的组件，最后返回 router 即可。

然后我们在 main.js 中，加载 router 的配置：

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

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

然后去 App.vue 中，修改代码为如下内容：

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

代码中的 router-link 和 router-view 就是由 vue-router 注册的全局组件，router-link 负责跳转不同的页面，相当于 Vue 世界中的超链接 a 标签； router-view 负责渲染路由匹配的组件，我们可以通过把 router-view 放在不同的地方，实现复杂项目的页面布局。

接下来我们再打开网页，页面变为如下内容

 至此，一个Vue3工程化项目的雏形搭建完成！