显示目录

Vue-Cli 3 创建单页项目

Vue-Cli 3 相比以前的版本有更多的优点: 项目结构更加清晰简洁, 运行效率更高, 打包速度更快, 包更小, 原生支持创建多页项目, 支持 yarn 进行包管理, 支持 Webpack 4 等, 生成的项目结构如下:

下面就简要的介绍下使用 Vue-Cli 3 创建单页项目的步骤:

  1. 安装 yarn, 可参考 Yarn 新手指南

    • yarn 安装项目依赖: yarn add package-name [--dev/-D]
    • yarn 安装全局依赖: yarn global add package-name
  2. 安装 Vue-Cli 3: yarn global add @vue/cli

  3. 使用 Vue-Cli 3 创建项目 (推荐可视化的方式创建):

    • 可视化创建: vue ui
    • 命令行创建: vue create project-name

    • 选择需要的插件, 推荐

      • Babel
      • Router
      • Vuex
      • Css Pre-processors (推荐 SCSS)
      • Linter/Formatter (推荐 Airbnb)
  4. 根据项目规范修改 eslint rules (在 package.json 文件里): 例如使用 4 个空格缩进, 代码中可以允许有多个空格进行排版, 更多的规则请自行定制:

    1
    2
    3
    4
    5
    "rules": {
    "vue/no-reserved-keys": "warning",
    "indent": ["error", 4],
    "no-multi-spaces": 0
    }
  5. 修改运行端口 (修改 vue.config.js, 在项目根目录下, 没有的话自行创建), 默认端口是 8080, 但是如果同时开发后端, 要运行 Tomcat 等, 8080 端口已经被占用, 需要修改为其他端口, 例如修改为 8888:

    1
    2
    3
    4
    5
    module.exports = {
    devServer: {
    port: 8888,
    },
    };

    更多配置请参考 https://cli.vuejs.org/zh/config/

  6. 运行: yarn serve

  7. 打包: yarn build

    默认输出目录为项目根路径下 dist 目录, 可以修改 outputDir 进行指定:

    1
    2
    3
    4
    5
    6
    module.exports = {
    devServer: {
    port: 8888,
    },
    outputDir: '../static',
    };

提示: Atom 使用 atom-beautify 格式化时, 如果不是 4 个空格, 可以手动在项目根目录下创建文件 .editorconfig, 修改 indent_size = 4