Parcel 构建 VueJS 应用 02：组件、相关配置

Ulyso

上一节我们成功搭建并运行项目，接下来，我们继续完善项目。

组件

首先，在 src 目录下，创建 components/HelloWorld.vue 文件，内容参考 vue-cli 内容：

1<template>
2    <div class="hello">
3        <h1>{{ msg }}</h1>
4        <p>
5            For guide and recipes on how to configure / customize this project,<br>
6            check out the
7            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
8        </p>
9        <h3>Installed CLI Plugins</h3>
10        <ul>
11            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13        </ul>
14        <h3>Essential Links</h3>
15        <ul>
16            <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21        </ul>
22        <h3>Ecosystem</h3>
23        <ul>
24            <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29        </ul>
30    </div>
31</template>
32
33<script>
34export default {
35  name: "HelloWorld",
36  props: {
37    msg: String
38  }
39};
40</script>
41
42<!-- Add "scoped" attribute to limit CSS to this component only -->
43<style scoped>
44h3 {
45  margin: 40px 0 0;
46}
47ul {
48  list-style-type: none;
49  padding: 0;
50}
51li {
52  display: inline-block;
53  margin: 0 10px;
54}
55a {
56  color: #42b983;
57}
58</style>
59

修改 App.vue 内容，引入 HelloWorld.vue

1<template>
2    <div id="app">
3        <img alt="Vue logo" src="./assets/logo.png">
4        <HelloWorld msg="Welcome to Your Vue.js App" />
5    </div>
6</template>
7
8<script>
9import HelloWorld from "./components/HelloWorld.vue";
10
11export default {
12  name: "app",
13  components: {
14    HelloWorld
15  }
16};
17</script>
18
19<style>
20#app {
21  font-family: "Avenir", Helvetica, Arial, sans-serif;
22  -webkit-font-smoothing: antialiased;
23  -moz-osx-font-smoothing: grayscale;
24  text-align: center;
25  color: #2c3e50;
26  margin-top: 60px;
27}
28</style>
29

运行项目 yarn dev :

favicon.ico

项目根目录增加 favicon.ico 文件，修改 index.html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width,initial-scale=1.0">
8    <link rel="icon" href="favicon.ico">
9    <title>Parcel Vue</title>
10</head>
11
12<body>
13    <noscript>
14        <strong>We're sorry but base doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15    </noscript>
16    <div id="app"></div>
17    <script src="./src/main.js"></script>
18</body>
19
20</html>
21

Babel

项目中使用 Babel：

1yarn add -D @babel/core @babel/cli @babel/preset-env
2yarn add @babel/polyfill
3

创建 babel.config.js 文件

1const presets = [
2  [
3    "@babel/env",
4    {
5      useBuiltIns: "usage",
6    },
7  ],
8];
9
10module.exports = { presets };
11

.browserslistrc

1> 1%
2last 2 versions
3not ie <= 8
4

PostCSS

1yarn add -D postcss-modules autoprefixer
2

项目根目录新增 postcss.config.js 文件：

1module.exports = {
2  modules: true,
3  plugins: {
4    autoprefixer: {
5      grid: true
6    }
7  }
8};
9