搭建Vue 3工程化项目

DY561
348 阅读3分钟

目标

安装和构建Vue3开发环境

环境准备：

  1. 谷歌浏览器
  2. VS code编辑器（需要安装Volar插件）
  3. Vue3
  4. node.js(v14.15.0)

vue3项目的创建

第一步：使用Vite创建项目：

npm init vite

具体选择如下图所示：

image.png

我们看一下 juejin 下面的文件目录，这个目录就是我们项目启动的骨架了。

  1. index.html 是项目的入口；
  2. package。json 是管理项目依赖和配置的文件；
  3. public 目录放置静态资源，比如 logo 等图片；
  4. vite.configjs 就是和 Vite 相关所有工程化的配置；
  5. src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写，后面我们也会在 src 目录下细化项目规范。

第二步：安装和启动

在juejin-admin文件夹内执行如下命令，该命令用于安装依赖

npm install

成功后再执行如下命令，该命令用于启动项目

npm run dev

如果效果如下所示，就表示项目启动成功

image.png

在谷歌浏览器里访问：http://localhost:3000/ 就可以打开我们新建的项目。启动的项目如下：

image.png

第三步：安装Vuex 和Vue-router

项目有很多的页面，所以 vue-router 和 Vuex 也成为了必选项。
Vue： 负责核心
Vuex 负责管理数据
vue-router 负责管理路由
我们在 juejin 目录中使用下面这段代码安装 Vuex 和 vue-router。

npm install vue-router@next vuex@next

规范

接下来我们对src文件夹进行分层规定，src组织结构如下：

image.png 根据组织结构图在src文件夹下建立对应的文件夹。

路由的使用

  1. 在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
  1. 在pages这个文件夹下新建home.vue和about.vue文件，分别输入如下内容：
<!-- home.vue -->
<template>
    <h1>这是首页</h1>
</template>

<!-- about.vue -->
<template>
    <h1>这是关于页面</h1>
</template>
  1. 在 main.js 中，加载 router 的配置：
import { createApp } from 'vue'
import App from './App.vue'
import router from '../src/router/index'

createApp(App)
    .use(router)
    .mount('#app') //把Vue这个应用挂载到页面上。
  1. 然后去 App.vue 中，我们删掉 template 之前的代码，加入如下内容：
<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 放在不同的地方， 实现复杂项目的页面布局。
现在页面的效果图如下：

image.png

当然这样还不够，我们在实际项目开发中还会有各种工具的集成，比如写 CSS 代码时，我们需要预处理工具 stylus 或者 sass；组件库开发中，我们需要 Element3 作为组件库；网络请求后端数据的时候，我们需要 Axios。

对于团队维护的项目，工具集成完毕后，还要有严格的代码规范。我们需要 Eslint 和 Prettier 来规范代码的格式，Eslint 和 Prettier 可以规范项目中 JavaScript 代码的可读性和一致性。

代码的管理还需要使用 Git，我们默认使用 GitHub 来托管我们的代码。此外，我们还会使用 commitizen 来规范 Git 的日志信息。

对于我们项目的基础组件，我们还会提供单元测试来确保代码质量和可维护性，最后我们还会配置 GitHub Action 来实现自动化的部署。

最后这个项目的架构大概是下面这样，这就是一个足以应对复杂项目开发的架构了：

image.png 项目雏形搭建完毕后，后面用到哪一块就会把哪一块加上，也就是用一个循序渐进的方式学习。至此，项目搭建完毕， 在下一篇文章中，我们开启下一步，也就是页面的主题代码编写。

avatar
文章
阅读
粉丝