【039】vue-cli4.0基础学习：公共样式的编写

前言

不知道大家在写组件的时候，有没有发现一个特别麻烦的事情，就是我们每次开始写一个新的组件的，都会有相似的样式出现，比如：

/* v-about.vue */
.v-about {
    padding: 20px 30px;
}

/* v-index.vue */
.v-index {
    padding: 20px 30px;
}

/* v-news-detail.vue */
.v-news-detail {
    padding: 20px 40px;
}

/* v-news.vue */
.v-news {
    padding: 20px 50px;
}

这些样式都是组件中的内边距，那么，我们是否可以对这些样式统一写在一个文件中，并使用统一的样式padding: 20px 30px;。这样写的话，在后期维护时不需要每个组件都打开进行修改，只需要修改一个文件的代码即可。

开始编写

在前面的项目目录介绍中，我们知道assets文件夹是公共文件存放处，既然如此，那么公共样式可以考虑放在该文件夹下。

首先在assets文件夹下再新建一个css文件夹，这样做的好处是，我们后期可能在开发时也会在assets文件夹下存放一些公共的js函数，提前划分好文件夹可以让项目目录结构变得更加清晰，避免后期花费大量时间查找文件。
然后在css文件夹下新建一个app.css文件，用于存放公共样式。

app.css完整代码：

1
2
3

.content {
    padding: 20px 30px;
}

公共样式的引用

既然是公共样式，那么在一开始加载项目时就应该一起加载才行。

打开main.js文件，因为这个文件是程序入口文件，加载各种公共组件，所以可以在这里添加。
完整代码：

import Vue from 'vue'
import App from './App.vue'

// 引入我们配置好的路由
import router from './router';

Vue.config.productionTip = false

// 引入样式
import './assets/css/app.css';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

对相关的组件进行修改

我们依次打开文件v-about.vue，v-index.vue，v-news-detail.vue，v-news.vue对第一节中提到的样式进行删除，然后对应的元素添加content

比如v-index.vue的完整代码：

<template>
    <div class="v-index content">
        <h1>我是首页</h1>
    </div>
</template>

<script>
export default {
    name: 'v-index',
    desc: '首页'
}
</script>

到了这里，公共样式已经修改完成，我们可以在浏览器中看看效果如何。

目前项目目录结构

.
|-- node_modules
|-- public
|   |-- favicon.ico
|   |-- index.html
|-- src
|   |-- assets
|   |   |-- css
|   |   |   |-- app.css
|   |-- components
|   |   |-- HelloWorld.vue
|   |   |-- v-about.vue
|   |   |-- v-header.vue
|   |   |-- v-index.vue
|   |   |-- v-news-detail.vue
|   |   |-- v-news.vue
|   |   |-- v-success.vue
|   |-- router
|   |   |-- index.js
|   |-- App.vue
|   |-- main.js
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
.

总结

有些小伙伴可能会问写公共样式为什么不用 scss 或者 less，它们不香吗？，答案肯定是香，而且使用它们绝对能提高我们的工作效率，不过在vue-cli项目中，我们还是先使用一些比较传统的方法来写公共样式。如果有想尝试使用less或scss的小伙伴，可以尝试写一下，我相信你会喜欢上它们的。