使用Vue.js构建项目的一般方法

看完一些webpack之后,在家看了一下vue-cli的使用方法,这东西构建项目属实挺方便,不过都是跟着教程走,一些操作性的东西也没有什么自己的见解,这部分就暂时没有写。

这篇主要是想记录一下使用vue实际开发的过程,如果做到某一步发现被理论知识卡住了我就回去补补。

配置项目

假设现在已经装好vue-cli和webpack了,嗯。。

首先用vue ui命令打开图形管理界面,在选择好的路径里新建一个项目,类型我选了自定义,但是我没改设置就点了下一步(我也不知道那些插件是干啥的hh,有一说一,这个确实看起来很不错。

创建完之后是这样的

点进去就是这样的

这里面可以管理插件,设置依赖,配置啥的。

然后我在git建了一个库,顺便试试部署,把链接clone到本地,然后把代码啥的复制进去,然后使用git add .把所有的文件加进去,再使用git commit -mgit push推到GitHub上面去了。我这样做其实麻烦了一步,有一个命令是可以直接在clone的时候clone到那个文件夹的。

目录结构

一般来说,一个刚创建的vue项目的目录结构是怎样的呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
vue-supermall
|- .editorconfig
|- .gitnore
|- babel.config.js
|- LICENSE
|- package.json
|- package-lock.json
|- readme.md
|- /.git
|- /node_modules
|- /public
|- /src
|- App.vue
|- main.js
|- /assets
|- /components

我以我这个项目为例吧,刚创建的时候是这样,在src文件夹内保存着我们的源代码,而外面的部分则是一些别的东西。那么,把src文件夹展开,现在的这个项目里面有什么呢?

1
2
3
4
5
6
7
|- /src
|- App.vue
|- main.js
|- /assets
|- logo.png
|- /components
|- HelloWorld.vue

这是一个基本的helloworld项目,可以看出,assets里面包含着使用的资源,像是图片文件,css文件都会放在这里,所以便于管理的话,一般来说会为这些资源建立文件夹。components里面包含着项目使用的组件,但是如果组件比较多的话也不太方便维护,所以一般还会再建立一个和components文件夹同级的文件夹views,代表一些大的视图,比如主页视图home,分类视图categories。在components里面一般会放一些公共组件,比如很多页面都要用到某个组件,那就放在components里面。公共的组件里面还可以细分为common和content,common里面放置的是一些整体的公共组件,我这个项目用完下个项目还会用的那种,就是可以复用的组件。content里面放一些针对于当前项目业务的公共组件。有了common文件夹的话,下次再需要建立什么项目时,可以直接把这个文件夹拖过去,方便使用。

然后还有router路由相关,store是vuex的状态管理相关,network是网络相关,common放一些公共资源,像是公共的js文件。比如公共常量文件const.js·,公共工具文件utils.js,混入文件mixin.js

一般来说,开发一个新项目的时候,生成完毕的第一步就是划分目录结构。经过刚才的操作,src文件夹变成了这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|- /src
|- App.vue
|- main.js
|- /assets
|- css
|- js
|- /common
|- const.js
|- utils.js
|- mixin.js
|- /components
|- /common
|- /content
|- /network
|- /router
|- /store
|- /views
|- /home
|- /categories

基本的目录结构大概就是如此,其实可以以这个基础再细分。

引入CSS文件

GitHub上有一个css标准化的文件,叫做normalize.css,用于标准初始化css,我也整了一个,放在assets里面的css文件夹,当然还需要自己来做一个base.css的东西,用于自定义的一些初始化内容,比如可以写这个:

1
2
3
4
5
@import url("./normalize.css");
body {
margin: 0;
padding: 0;
}

但其实base.css也不会只有这些东西。

然后要怎样在项目中使用呢?在app.vue里面,这样写:

1
2
3
<style>
@import url("assets/css/base.css");
</style>

可以使用伪类在根元素内定义变量(没错,CSS里面可以定义变量)

1
2
3
4
5
6
7
8
:root {
--color-text: #666;
--color-high-text: #ff5777;
--color-tint: #ff8198;
--color-background: #fff;
--font-size: 14px;
--line-height: 1.5;
}

text代表普通文本的颜色,high-text代表高亮文本的颜色,tint代表用到的背景色,毕竟背景色不会都是白色。

这样在使用这些变量的时候,这样写:

1
font-size: var(--large-size);

在定义样式的时候,使用less或者scss这种偏冷门语法会更容易定义变量,根据需要可以直接选用,webpack会帮助打包成CSS。

我把教程里的CSS文件抄下来了,好像还能给我补充一些知识点。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@import url("normalize.css");

:root {
--color-text: #666;
--color-high-text: #ff5777;
--color-tint: #ff8198;
--color-background: #fff;
--font-size: 14px;
--line-height: 1.5;
}

body {
font-family: "Helvetica Neue", helvetica, "PingFang SC", "Hiragino Sans GB","Microsoft yahei","微软雅黑",Arial, sans-serif;
user-select: none; /* 禁止用户鼠标在页面上选中文字或图片 */
-webkit-tap-highlight-color: transparent;
/* webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色,颜色用数值调节 */
background: var(--color-background);
color: var(--color-text);
width: 100vw;
/* vw是css3中的一个新的长度单位,是view width的简写,指可视窗口的宽度.假如宽度是1200px的话,那10vw就是120px */
/* 此外,还有vh,指可视窗口的高度. */
/* 百分之几的长和百分之几的宽,可以这么理解 */
}

a {
color: var(--color-text);
text-decoration: none;
}

.clear-fix::after {
clear: both;
content: '';
display: block;
width: 0;
height: 0;
visibility: hidden;
}

.clear-fix {
zoom: 1;
}

.left {
float: left;
}

.right {
float: right;
}
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信