技术选型

创建vue工程化项目

vue2官方推荐vue-cli4创建项目；

vue3建议使用Vite2创建项目，因为vite具有调试秒级和热更新，vite基于node.js；当然也可以用vue-cli4，只是vue3更推荐vite

包管理器

npm

pnpm ---更推荐

yarn

pnpm是新一代的包管理工，其优点如下：

它可以让node_module包更小
其次它把package.json中的的依赖放到node_module的根目录下，把其他依赖放到node_module的.pnpm文件下，更方便我们查看项目的依赖

pnpm i命令安装依赖包，不会全部下载，会在本地找已经安装了的包，直接复用即可，没有的包才会下载，提高了包的复用性和包安装速度

TypeScript和JavaScript

vue2核心this，所有的数据都挂载在this上，对TypeScript支持不太友好，建议JavaScript

vue3源码使用TS全面重构，建议使用TypeScript

vue数据管理工具

vuex：vuex4官方推荐vue2使用，vue3也可以用

pinia：官方推荐vue3使用，相当于vuex5版本

vue-router路由

管理项目多页面应用

搭建环境

搭建安装node环境

创建vue工程化项目，无论使用vue-cli还是vite都需要搭建node环境，因此首先要搭建node环境，选择node的LTS版本安装，node会自动安装npm包，如果想使用pnpm命令，则可以使用npm install -pnpm -g来安装pnpm命令

创建vue项目

下面举例使用npm、vite创建vue3项目的例子，如果使用vue-cli或其他命令行工具创建可以到相应的官网查看具体命令

使用vue3 + vite + npm技术搭建一个vue3项目：

创建项目命令：npm create vite

安装依赖：npm i

运行项目：npm run dev

最后生成项目文件骨架：

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

安装调试插件

vscode编辑器

vue3安装Volar语法提示插件

Devtools调试工具插件

chrome浏览器

这一步就实现了项目工程化的雏形

搭建文件目录

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

安装vue-router、Vuex

因为项目是多页面的，并且需要用到数据管理，所以vue-router和vuex成为必选项。就像团队的人员配比，Vue负责核心、Vuex负责管理数据、Vue-router负责管理路由

安装

npm install vue-router@next vuex@next

创建vue-router的配置文件

在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函数，配置内部使用hash模式的路由，也就是url上会通过#来区分

引入路由配置文件

在全局配置文件main.js中引入路由配置文件index.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store './store/index.js'

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

使用vue-router全局组件

router-link、router-view就是vue-router全局注册的组件，router-link负责跳转不同的页面，相当于a标签，router-view负责渲染路由匹配的组件，可以放在不同地方，实现复杂项目的页面布局。

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

创建vuex的配置文件

src/store目录下新建index.js文件

import { createStore } from 'vuex'

const store = createStore({
    state(){
     return {
       
       }
    },
    getters:{
      
    },
    mutations:{
      
    },
    actions:{
       
    }
})

export default storse

引入Vuex配置文件

项目入口文件src/main.js文件中，引入src/sotre/index.js配置文件，使用vue实例.use()方法将store注册到vue实例中，这样vue与vuex就连接上了。

import store './store/index.js'

const app = createApp(App)

app.use(store)
   .mount('#app')

组件中引入Vuex

<script setup>
  import { useStore } from 'vuex'
  const store = useStore()
  console.log(store) // 打印如下图
</script>

图片-多页面项目开发雏形

集成相关工具

css预处理器

stylus、sass

组件库

element 3：适用于学习

Ant Design for vue ：更适用于企业开发

Navicat UI ： 尤大在微博上推荐过，比较成熟。 [naɪˈiːv] adj：缺乏经验的；幼稚的；

网络请求

Axios

代码规范

Eslint、Prettier可以规范项目中JavaScript代码的可读性和一致性

代码管理

Git进行代码管理

GitHub托管代码

commitizen规范Git日志信息

单元测试

对于项目的基础组件，提供单元测试来确保代码质量和可维护性

自动化部署

配置Github Action来实现自动化部署，纯前端的部署

最终项目架构图

在搭建vue3项目开始，先来浏览一下整个项目构建图，只需要按照架构图每部分去学习即可。该构架图足以应复杂的项目开发

如何搭建vue3工程化项目