Vue 技术栈从零搭建一个Vue3全家桶+webpack5基础架构项目

ziyi813

已于 2022-08-06 14:03:42 修改

阅读量1.9k

点赞数 2

分类专栏：前端 vue 文章标签：前端 vue webpack

于 2022-08-06 13:57:09 首次发布

本文链接：https://blog.csdn.net/ziyi813/article/details/126004267

版权

项目环境，nodejs 使用高版本12以上， npm 6以上
vue2的时候有一直用一个搭建好的基础结构，每次开新项目就拉去直接使用，vue3来了，升级了一下这个项目基础结构，系统的整理一下记录一下分享给大家。
完整项目 github 地址：vue3-project-template

项目使用的技术栈工具及大版本

语言：javascript
构建工具：webpack 5
前端框架：vue 3
路由：vue router 4
状态管理：vuex 4
CSS 预编译处理：less
网络请求工具：axios
前端 UI 框架：element ui

项目搭建步骤

创建开发目录安装 webpack 工具及开发服务器

mkdir admin
cd admin
# 初始化项目生成 package.json
npm init -y
# 安装 webpack工具 及dev-server服务
npm i webpack webpack-cli webpack-dev-server webpack-merge --save-dev

当前我的安装成功后的版本：

+ webpack-merge@5.8.0
+ webpack-cli@4.10.0
+ webpack-dev-server@4.9.3
+ webpack@5.74.0

安装webpack 需要的一些 loader

# 安装 html 模板解析器
npm i html-webpack-plugin --save-dev
# 安装 css-loader style-loader less-loader
npm i css-loader style-loader url-loader less-loader --save-dev
# 安装 babel
npm i babel-loader @babel/core @babel/preset-env -D

基础项目文件结构

在项目根目录创建两个文件夹

mkdir public
mkdir src

在 public 目录创建一个 index.html 文件，复制一个 favicon.ico 文件过来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

安装 vue 全家桶

    # 最新稳定版的 vue
    npm install vue@next
    # 单文件组件@vue/compiler-sfc, vue-loader解析
    npm install -D @vue/compiler-sfc vue-loader
    # vue router 路由及 vuex
    npm install vue-router@4 vuex --save

当前我的本机环境安装后的版本号：

+ vue@3.2.36
+ @vue/compiler-sfc@3.2.37
+ vue-loader@17.0.0
+ vue-router@4.1.2
+ vuex@4.0.2

创建项目文件结构

先创建一个这样的目录结构备用

├── App.vue   		入口文件
├── api  			接口文件目录
├── assets 			静态资源目录
├── components  	组件目录
├── layout  		布局文件目录
├── main.js 		入口 js
├── router 			路由文件目录
├── store  			vuex 目录
└── utils  			项目工具类目录

src 目录结构如下图：
在这里插入图片描述

完善入口 main.js 文件和 App.vue 文件

main.js

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

const app = createApp(App)
app.mount('#app')

App.vue


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

<style>
html,body{
   
  padding: 0;
  margin: 0;
  width: 100%;
}
#app {
   
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>

配置 webpack配置文件

在 src 的同级目录再创建一个 config 文件目录，创建一个 webpck.dev.js 配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    VueLoaderPlugin } = require('vue-loader');

module.exports = {
   
  entry: {
   
    main: './src/main.js',
  },
  output: {
   
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[chunkhash:8].build.js'
  },
  mode: "development",
  devtool: 'source-map',
  resolve: {
   
    // 快捷目录别名
    alias: {
   
      "@": path.resolve('./src'),
    },
    // 配置文件扩展名，引入的时候可以不需要加后缀名了
    extensions: [ '*', '.js', '.ts', '.vue', '.json']
  },
  module: {
   
    rules: [
      {
   
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
   
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
   
        test:/\.js$/, 
        exclude:/node_modules/, //排除node_modules文件夹
        use:{
   
          loader:'babel-loader', //转换成es5
          options:{
   
            presets:['@babel/preset-env'], //设置编译的规则
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
   
      template: './public/index.html',
      filename: 'index.html'
    })
  ]
};

添加两个启动脚本在 package.json 文件中
在 package.json 的 script 中添加两个脚本命令：

"build": "webpack --config config/webpack.dev.js",
"dev": "webpack serve --config config/webpack.dev.js",

这里，运行两个命令都可以成功了。
打包和开发都可以跑起来了。

测试一下打包

npm run build

在这里插入图片描述
运行一下开发模式

npm run dev

在这里插入图片描述
到这里一个最简单的 webpack + vue 开发环境配置就完成了，可以解析.vue单文件组件，可以解析 CSS，也可以正常启动开发和打包。

接下来继续完善

添加 less 解析

# 安装 less-loader
npm i install less less-loader --save-dev

webpack 中配置添加 less-loader

{
   
   test: /\.less$/,
   use: [
     'style-loader',
     'css-loader',
     'less-loader'
   ]
 }

测试一下，在 App.vue 中随便写一点 less 样式，页面中文字变成红色，less 添加完成。

<style lang="less" scoped>
  body{
   
    div {
   
      color: red;
    }
  }
</style>

安装前端 UI 框架，element-plus

element-plus

npm install element-plus --save

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
这个自己评估项目，如果你这个项目你预估会非常多的模块，是一个中大型级后台，那么推荐按需引入，文件体积能少一点还是少一点，
如果是小后台，就几个小模块，懒的麻烦完整引入不在乎文件体积大小，自己判断就行。

修改一下 main.js，
添加引入 element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

在 app 实例后添加

app.use(ElementPlus)

当前 main 文件

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

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

可以 App.vue 文件中添加一个按钮组件测试一下，看一下UI 渲染是否成功了。

<el-button type="primary">Primary</el-button>

在这里插入图片描述
渲染成功，安装完成。

后台管理界面框架 + vue router 路由完善

建立页面基础结构

src 目录下创建一个 pages 目录，创建几个基础路由页面，404错误页面，登录成功的首页，登录页面。

├── common
│   └── 404.vue
├── home
│   └── index.vue
└── login
    └── index.vue

在 home/index.vue 中随便写点东西

<template>
  <h3>Home page</h3>
</template>

layout 目录后台管理界面结构

src目录中创建一个 layout 目录，在 layout 目录下创建后台管理界面，基本结构如下图：
左为菜单项目，右：头部，面包屑，主路由内容区

在这里插入图片描述
在 layout 中建立以下文件结构，可以根据需求自己调整

├── breadcrumb
│   └── index.vue
├── header
│   └── index.vue
└── sidebar
    └── index.vue
├── index.vue

完善 router 路由

在 src 下的 router 目录中开始完善路由，让界面渲染出来跑起来。

├── common.js   # 公共页面
└── index.js    # 入口路由

我们采用 index.js 入口引入其它模块路由

index.js

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

import {
    commonRoutes } from "./common"; // 公共路由
// import { imageRoutes } from "./image/index"; // 业务模块

const routes = [
  ...commonRoutes,
  // ...imageRoutes
]
const router = createRouter({
   
  history: createWebHashHistory(),
  routes
})

export default router

common.js


import Layout from "@/layout/index.vue";
import Home from "@/pages/home/index.vue";

export const commonRoutes = [
  {
   
    path: "/login",
    name: "登录",
    component: () => import("@/pages/login/index.vue"),
  },
  {
   
    path: "/",
    name: "home",
    component: Layout,

最低0.47元/天解锁文章