vue-cli3 项目从搭建优化到docker部署

最新推荐文章于 2024-06-04 09:57:30 发布

lentoo-

最新推荐文章于 2024-06-04 09:57:30 发布

阅读量2.9k

点赞数 21

分类专栏： Vue.js JavaScript Webpack Node.js 文章标签： Vue.js JavaScript Webpack Docker Vue-cli3

本文链接：https://blog.csdn.net/QQ729533020/article/details/99713936

版权

vue-cli3 项目从搭建优化到docker部署

项目地址 vue-cli3-project 欢迎 star

原文地址 https://www.ccode.live/lentoo/list/9?from=art

1. 创建一个vue项目

相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。

1.1 安装@vue/cli

# 全局安装 vue-cli脚手架
npm install -g @vue/cli

等待安装完成后开始下一步

1.2 初始化项目

vue create vue-cli3-project

选择一个预设

可以选择默认预设，默认预设包含了babel,eslint

我们选择更多功能 Manually select features

回车后来到选择插件

插件选择

这边选择了（Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架）

路由模式选择

是否使用 history模式的路由（Yes）

选择一个css预处理器 (Sass/SCSS)

选择一个eslint配置

这边选择 ESLint + Standard config，个人比较喜欢这个代码规范

选择什么时候进行 eslint 校验

选择（Lint on save）保存是检查

如果你正在使用的vscode编辑器的话，可以配置eslint插件进行代码自动格式化

7. 选择测试框架（Mocha + Chai）

8. 选择将这些配置文件写入到什么地方 (In dedicated config files)

是否保存这份预设配置？（y）

选是的话，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。

等待依赖完成

2. 全局组件自动注册

在components目录下创建一个global目录，里面放置一些需要全局注册的组件。

index.js作用只要是引入main.vue，导出组件对象

在components中创建一个index.js，用来扫描全局对象并自动注册。

// components/index.js
import Vue from 'vue'

// 自动加载 global 目录下的 .js 结尾的文件
const componentsContext = require.context('./global', true, /\.js$/)

componentsContext.keys().forEach(component => {
   
  const componentConfig = componentsContext(component)
  /**
  * 兼容 import export 和 require module.export 两种规范
  */
  const ctrl = componentConfig.default || componentConfig
  Vue.component(ctrl.name, ctrl)
})

最后在入口文件main.js中导入这个index.js中就可以了

3.路由自动引入

在 Vue项目中使用路由，相信想熟的人已经很熟悉怎么使用了，要新增一个页面的话，需要到路由配置中配置该页面的信息。

如果页面越来越多的话，那么如何让我们的路由更简洁呢？

3.1 拆分路由

根据不同的业务模块进行拆分路由

在每个子模块中导出一个路由配置数组

在根 index.js中导入所有子模块

3.2 自动扫描子模块路由并导入

当我们的业务越来越庞大，每次新增业务模块的时候，我们都要在路由下面新增一个子路由模块，然后在index.js中导入。

那么如何简化这种操作呢？

通过上面的自动扫描全局组件注册，我们也可以实现自动扫描子模块路由并导入

4. 通过node来生成组件

作为前端开发者，放着 node这么好用的东西如果不能运用起来，岂不是很浪费？

虽然我们通过上面已经实现了组件的自动注册，不过每次新建组件的时候，都要创建一个目录，然后新增一个.vue文件，然后写template、script、style这些东西，然后新建一个index.js、导出vue组件、虽然有插件能实现自动补全，但还是很麻烦有木有。

那么我们能不能通过node来帮助我们干这些事情呢？只要告诉node帮我生成的组件名称就行了。其它的事情让node来干

4.1 通过node来生成组件

安装一下chalk，这个插件能让我们的控制台输出语句有各种颜色区分

npm install chalk --save-dev

在根目录中创建一个 scripts 文件夹，

新增一个generateComponent.js文件，放置生成组件的代码、

新增一个template.js文件，放置组件模板的代码

template.js

// template.js
module.exports = {
   
  vueTemplate: compoenntName => {
   
    return `<template>
  <div class="${
     compoenntName}">
    ${
     compoenntName}组件
  </div>
</template>
<script>
export default {
  name: '${
     compoenntName}'
}
</script>
<style lang="scss" scoped>
.${
     compoenntName} {

}
</style>
`
  },
  entryTemplate: `import Main from './main.vue'
export default Main`
}

generateComponent.js

// generateComponent.js`
const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`${
     message}`))
const successLog = message => console.log(chalk.blue(`${
     message}`))
const errorLog = error => console.log(chalk.red(`${
     error}`))
const {
    vueTemplate, entryTemplate } = require('./template')

const generateFile = (path, data) => {
   
  if (fs.existsSync(path)) {
   
    errorLog(`${
     path}文件已存在`)
    return
  }
  return new Promise((resolve, reject) => {
   
    fs.writeFile(path, data, 'utf8', err => {
   
      if (err) {
   
        errorLog(err.message)
        reject(err)
      } else {
   
        resolve(true)
      }
    })
  })
}
log('请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀')
let componentName = ''
process.stdin.on('data', async chunk => {
   
  const inputName = String(chunk).trim().toString()
  /**
   * 组件目录路径
   */
  const componentDirectory = resolve('../src/components', inputName)

  /**
   * vue组件路径
   */
  const componentVueName = resolve(componentDirectory, 'main.vue')
  /**
   * 入口文件路径
   */
  const entryComponentName = resolve(componentDirectory, 'index.js')
  
  const hasComponentDirectory = fs.existsSync(componentDirectory)
  if (hasComponentDirectory) {
   
    errorLog(`${
     inputName}组件目录已存在，请重新输入`)
    return
  } else {
   
    log(`正在生成 component 目录 ${
     componentDirectory}`)
    await dotExistDirectoryCreate(componentDirectory)
    // fs.mkdirSync(componentDirectory);
  }
  try {
   
    if (inputName.includes('/')) {
   
      const inputArr = inputName.split('/')
      componentName = inputArr[inputArr.length -