样式

下面我们再去移植项目的样式 .. 在我们之前做的这个项目里，用到了 semantic ui 框架的样式 .. 在项目的 index.html 文件里，我直接链接了在 cdn 上的样式 ..

在我们现在做的 vuex 项目里，可以去下载一下 semantic ui .. 然后在项目里导入使用它的样式表 ..

回到命令行工具 .. 进入到 vuex 这个项目的下面 ..

执行一下 npm install semantic-ui-css --save

这样只会下载安装编译好的 semantic ui 框架， 可以直接使用它里面的样式表 ... 如果你想定制一下这套框架，可以安装使用 semanitc-ui 这个包 .. 里面会带一些编译工具 .. 让你定制框架的主题还有样式 ..

App.vue

打开项目的 App 这个组件 .. 在 script 里面 .. 用 import 导入一下 semantic-ui-css 下面的 semantic.min.css 这个样式表 ..

import 'semantic-ui-css/semantic.min.css'

保存一下 .. 现在界面上使用了 semantic ui 样式的地方会有一些变化 .. 也就是应用里现在可以用这个框架提供的样式了 ..

自定义样式

应用里还有些自定义的样式 .. 在之前做的 vue 项目里， style.css 里面的东西就是我添加的一点自定义的样式 .. 复制一下这里的所有的内容 ..

然后回到现在我们做的这个 vuex 项目的 App 组件 .

把这些样式放在组件的 style 里面 ...