开发实践

前端项目架构规范（ 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.js 运行环境（ npm 是 node 的包管理工具，它在安装 Node.js 运行环境的时候就一起安装好了）

在项目中安装和配置 webpack
npm install webpack webpack-cli --sav-dev
全局 Vue 脚手架工具
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
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—
—

删除 README.md，没啥用

package.json 中，将 serve 改为 start，这样就可以使用 npm start 运行项目了（根据习惯进行选择）
  "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>
    <!-- built files will be auto injected -->
  </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：通过全局环境变量，设置网站主标题

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

// 配置文件
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 = {

}

这样，网站标题就可以在配置文件（/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页面'
    }
  }
]

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

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,
}

设置全局环境变量 — 项目环境 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;
在 /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,
}

部署相关设置

在 /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;

在 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,
}