【Vue】《从0写一个WebApp》其一

其一：初始化说明

说明

该项目来源于慕课网前端工程师课程2020版第24周-第26周。项目所有资源包括设计图、图标、图片、接口均来自该网站辅助资料。

此项目只做学习交流使用。代码会更新在这里。

为什么要写这个？你的代码与来源网站的示范代码有何不同？

答：示范代码使用的是Vue3.0版本，该项目使用的是Vue2.6版本，在一些功能的实现上会略有不同。

​ 比如，Vue2.0版本下，template模板内只允许有一个根节点，而3.0版本去除了这些限制。

​ 3.0版本下，加入了Composition API，可以不用将所有数据都塞在data里了。

​ 后续可能会对该项目代码进行重构，升级到3.0版本。

​ 此外，根据辅助资料里的设计图，对样式和功能的实现有自己的理解，代码与示范代码并不完全相同。

项目初始化

技术栈确认

• vue: 2.6
• 以及vue全家桶

基础配置

css

1.使用style文件夹管理样式

​ 在css代码变得冗长之前，用一些科学的方式把它们拆分开来吧。

​ 将样式分成reset、base和自定义样式三部分。

​ reset样式存放的是重置浏览器的默认样式，如默认内外边距，字体大小等。可以在网上搜索reset.css以获取示例代码（也可以不要）。

​ base样式存放的是页面基础设置，比如使用rem布局需要设定html的字体大小、页面的主题颜色、字体颜色等，一些通用的类，如center-wrap也可以放在这里。

​ 自定义样式又分成几部分：

​ 首先，iconfont.css存放的是使用字体图标库的样式，在阿里巴巴矢量图标库里添加好图标，使用在线链接生成的css代码。

​

​ index.scss是样式的主入口，也是后面引入main.js里的样式。

​ mixins.scss是存放一些通用样式的，将其保证成函数形式，复用多处。比如

​ 如果这种通用样式使用了伪元素修饰符，还是放在base里吧。

​ 最后，别忘了在main.js里引入index.scss

2.添加修饰符使局部样式只在组件内部生效

​ 这么做是为了避免不同组件用了同一个类名造成样式冲突。

<style lang="scss" scoped></style>

页面配置

1.配置首页

在App.vue中添加

<router-view />

在router/index.js中指定path为’/'的组件。

{
		path: "/",
		name: "Home",
		component: () => import("../views/Home.vue"),
}

这样默认项目启动后，跳转到Home组件，Home组件就是该项目的首页。