开发实践

前端项目架构规范（ Vue2C ）

// 开发环境
   node -v  // v15.14.0
   npm -v  // 7.7.6
   webpack -v  // webpack-cli 4.2.0  webpack 5.11.0
   vue -V  // @vue/cli 4.5.15

// 开发环境

node -v // v15.14.0

npm -v // 7.7.6

webpack -v // webpack-cli 4.2.0 webpack 5.11.0

vue -V // @vue/cli 4.5.15

# 搭建项目开发环境（选择版本）

搭建 Node.js 运行环境（ npm 是 node 的包管理工具，它在安装 Node.js 运行环境的时候就一起安装好了）

在项目中安装和配置 webpack

npm install webpack webpack-cli --sav-dev

1

npm install webpack webpack-cli --sav-dev

全局 Vue 脚手架工具

npm install @vue/cli -g

1

npm install @vue/cli -g

# 创建项目

打开命令行工具，进入项目工作空间

执行命令行：创建项目

选择自定义创建

默认：~~Choose Vue version、Babel、Linter / Formatter~~

手动选择（上下移动，空格键选择）：Router / Vuex / CSS Pre-processors

选择 vue 2.x 版本

选择 history 模式的路由

选择 Less 作为 CSS 预处理器

选择标准（ Standard ）代码风格

代码保存和代码提交时，均校验代码风格

依赖插件或工具的配置文件，分文件保存

是否记录上述操作：否

等待安装

安装完毕

# 调整项目目录结构

// 项目目录结构
IDEA-WEB-PROJECT
— node_modules
— public
  — favicon.ico
  — index.html
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—

// 项目目录结构

IDEA-WEB-PROJECT

— node_modules

— public

— favicon.ico

— index.html

—

删除 README.md，没啥用

package.json 中，将 serve 改为 start，这样就可以使用 npm start 运行项目了（根据习惯进行选择）

"scripts": { "serve": "vue-cli-service serve", ... } 改为 "scripts": { "start": "vue-cli-service serve", ... }

1
2
3
4
5
6
7
8
9

  "scripts": {
    "serve": "vue-cli-service serve",
    ...
  }
    改为
  "scripts": {
    "start": "vue-cli-service serve",
    ...
  }

在项目根目录下创建 vue.config.js 文件

在 src 下创建 libs > setting > setting.js，作为项目配置文件

/public/favicon.ico

删除默认的 favicon.ico，替换为项目的 favicon.ico // 如何制作 favicon.ico

/public/index.html

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    
  </body>
</html>

替换为：

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= VUE_APP_TITLE %></title> </head> <body> <noscript> <strong>We're sorry but <%= VUE_APP_TITLE %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= VUE_APP_TITLE %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= VUE_APP_TITLE %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

目的 1：通过全局环境变量，设置网站主标题

在 /src/libs/setting/setting.js 中设置 VUE_APP_TITLE，即网站标题

// 配置文件 const Setting = { // 业务相关 VUE_APP_TITLE: 'webpiece - 整合分析、记录点滴' // 网站标题 } module.exports = Setting;

1
2
3
4
5
6
7

// 配置文件
const Setting = {
    // 业务相关
    VUE_APP_TITLE: 'webpiece - 整合分析、记录点滴' // 网站标题
}

module.exports = Setting;

在 /vue.config.js 中引入配置文件（/src/libs/setting/setting.js），并设置全局环境变量 VUE_APP_TITLE

const Setting = require('./src/libs/setting/setting.js') // 配置文件 // 全局环境变量 process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题 // 导出 module.exports = { }

1
2
3
4
5
6
7
8
9

const Setting = require('./src/libs/setting/setting.js') // 配置文件

// 全局环境变量
process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题

// 导出
module.exports = {

}

这样，网站标题就可以在配置文件（/src/libs/setting/setting.js）中，设置、显示了

目的 2（可选）：全局环境变量 + 路由实例的构造配置中的 meta:{title:页面标题} 来设置页面副标题

在路由实例的构造配置中添加 meta:{title:页面标题}，该页面标题作为副标题使用

const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: 'Home页面' } }, { path: '/about', name: 'About', component: () => import('../views/About.vue'), meta: { title: 'About页面' } } ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'Home页面'
    }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      title: 'About页面'
    }
  }
]

在路由前置导航中添加逻辑：在路由发生变化时，设置页面标题（主标题 + 副标题）

router.beforeEach((to, from, next) => { // 路由发生变化时，添加页面副标题 if (to.meta.title) { document.title = to.meta.title + ' - ' + process.env.VUE_APP_TITLE } next() })

1
2
3
4
5
6
7
8

router.beforeEach((to, from, next) => {
  // 路由发生变化时，添加页面副标题
  if (to.meta.title) {
    document.title = to.meta.title + ' - ' + process.env.VUE_APP_TITLE
  }

  next()
})

如果不是特别习惯，可以关闭保存时的代码风格检查，在 vue.config.js 中设置

const Setting = require('./src/libs/setting/setting.js') // 配置文件 // 全局环境变量 process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题 // 导出 module.exports = { // 保存时，关闭lint lintOnSave: false, }

1
2
3
4
5
6
7
8
9
10

const Setting = require('./src/libs/setting/setting.js') // 配置文件

// 全局环境变量
process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题

// 导出
module.exports = {
// 保存时，关闭lint
lintOnSave: false,
}

设置全局环境变量 — 项目环境 NODE_ENV，后续会用到

在 /src/libs/setting/setting.js 中，设置 NODE_ENV（项目环境：deveiopment / production）

// 配置文件 const Setting = { // 业务相关 VUE_APP_TITLE: 'webpiece - 整合分析、记录点滴', // 网站标题 NODE_ENV: 'development', // 项目环境 deveiopment / production } module.exports = Setting;

1
2
3
4
5
6
7
8

// 配置文件
const Setting = {
    // 业务相关
    VUE_APP_TITLE: 'webpiece - 整合分析、记录点滴', // 网站标题
    NODE_ENV: 'development', // 项目环境 deveiopment / production
}

module.exports = Setting;

在 /vue.config.js 中，将 NODE_ENV 设置为全局环境变量

const Setting = require('./src/libs/setting/setting.js') // 配置文件 // 全局环境变量 process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题 process.env.NODE_ENV = Setting.NODE_ENV // 项目环境 // 导出 module.exports = { // 保存时，关闭lint lintOnSave: false, }

1
2
3
4
5
6
7
8
9
10
11

const Setting = require('./src/libs/setting/setting.js') // 配置文件

// 全局环境变量
process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题
process.env.NODE_ENV = Setting.NODE_ENV // 项目环境

// 导出
module.exports = {
    // 保存时，关闭lint
    lintOnSave: false,
}

部署相关设置

在 /src/libs/setting/setting.js 中，添加相关字段：

// 配置文件 const Setting = { // 业务相关 VUE_APP_TITLE: 'webpiece - 整合分析、记录点滴', // 网站标题 NODE_ENV: 'development', // 项目环境 deveiopment / production // 部署相关 NODE_ENV: 'development', // 项目环境 deveiopment / production publicPath: '/', // 部署应用时的基本URL outputDir: 'dist', // 生成环境构建文件的目录名 assetsDir: '', // 放置生成的静态资源（js、css、img、fonts）的目录（相对于outputDir） } module.exports = Setting;

1
2
3
4
5
6
7
8
9
10
11
12
13

// 配置文件
const Setting = {
    // 业务相关
    VUE_APP_TITLE: 'webpiece - 整合分析、记录点滴', // 网站标题
    NODE_ENV: 'development', // 项目环境 deveiopment / production
    // 部署相关
    NODE_ENV: 'development', // 项目环境 deveiopment / production
    publicPath: '/', // 部署应用时的基本URL
    outputDir: 'dist', // 生成环境构建文件的目录名
    assetsDir: '', // 放置生成的静态资源（js、css、img、fonts）的目录（相对于outputDir）
}

module.exports = Setting;

在 vue.config.js 中，配置 webpack 相关

const Setting = require('./src/libs/setting/setting.js') // 配置文件 // 全局环境变量 process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题 process.env.NODE_ENV = Setting.NODE_ENV // 项目环境 // 导出 module.exports = { // 保存时，关闭lint lintOnSave: false, // 部署相关 // 部署应用时的基本URL publicPath: Setting.publicPath, // 生成环境构建文件的目录名 outputDir: Setting.outputDir, // 放置生成的静态资源（js、css、img、fonts）的目录（相对于outputDir） assetsDir: Setting.assetsDir, }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const Setting = require('./src/libs/setting/setting.js') // 配置文件

// 全局环境变量
process.env.VUE_APP_TITLE = Setting.VUE_APP_TITLE // 网站标题
process.env.NODE_ENV = Setting.NODE_ENV // 项目环境

// 导出
module.exports = {
    // 保存时，关闭lint
    lintOnSave: false,
    // 部署相关
    // 部署应用时的基本URL
    publicPath: Setting.publicPath,
    // 生成环境构建文件的目录名
    outputDir: Setting.outputDir,
    // 放置生成的静态资源（js、css、img、fonts）的目录（相对于outputDir）
    assetsDir: Setting.assetsDir,
}