显示目录

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

vue.config.js 参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
process.env.VUE_APP_VERSION = new Date().getTime();

module.exports = {
devServer: {
port: 8888,
proxy: 'http://localhost:8080'
},

// 多页的页面
pages: {
sample: 'src/pages/sample/main.js',
teacher: 'src/pages/teacher/main.js',
'admin-school': 'src/pages/admin-school/main.js',
'admin-system': 'src/pages/admin-system/main.js',
},

// yarn build 的输出目录
outputDir: '../ebag-web-app/src/main/webapp/WEB-INF/page-vue',
assetsDir: 'static',

css: {
loaderOptions: {
sass: {
// SCSS 全局变量
data: `
@import "@/../public/static/css/variables.scss";
`
}
}
}
};

页面的 HTML 中引入自定义 JS 和 CSS 文件时最好也加上打包时的时间戳 process.env.VUE_APP_VERSION, 避免缓存引起的问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>

<% hash = VUE_APP_VERSION %>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>老师</title>

<link rel="stylesheet" type="text/css" href="/static/css/global.css?hash=<%= hash %>">
</head>

<body>

<div id="app"></div>
<!-- 库文件 -->
<script src="/static/lib/jquery.min.js"></script>
<script src="/static/lib/jquery.rest.js"></script>

<!-- 项目的 JS: 增加了 hash 使得更新后不用刷新缓存就能使用最新的 JS -->
<script src="/static/lib/tio/Message.js?hash=<%= hash %>"></script>
<script src="/static/js/urls.js?hash=<%= hash %>"></script>

<!-- built files will be auto injected -->
</body>
</html>