vue项目从0到上线知识点梳理.
框架搭完后用一天琐碎时间写的web页面,果然html,css才是占用时间的大头
这里讲下所涉及的点:
- vue-cli3.0框架搭建(vue ui)
- 基础依赖,vuerouter使用
- 一些css的知识盲点
- nginx配置,脚本编写
1.框架搭建
前提:安装了node环境,然后全局安装npm install -g @vue/cli
这时候就可以查看vue --version
安装时可以通过
1.vue create 项目名
- vue ui
两种方式进行,我推荐第二种,图形化界面,使用第一种是在terminal里选择,我之前创建过,并没有帮我生成一个vue.config.js.
这里使用的是第二种,在工作空间中(存放项目的路径下)运行vue ui,会打开网页,
推荐手动,推荐以下选项:
最后不保存预设(这么简单的配置逻辑不需要保存的)
安装完成后,安装一些npm依赖:
然后开始搭框架,基本界面如下
vueconfig文件,3.0的cli给我的感觉是类似想做成springboot那种,约定大于配置,但是配置文件又弄得比较复杂,别名,loader什么的还要什么chain来使用,并不是比较简洁,不过我目前基本上也只修改了一点点
App.vue
引用文件这块,资源文件,如less,css,图片等用相对路径,
js,vue可以用绝对路径(我目前的理解,如果有问题请指出)
a-layout这块儿的点:
注意下
- 1.插槽的使用,单插槽无需定义name
- 2.name的定义与在组件中的使用无关,你最后使用的组件是你在components里面用的那个名字,一般用的es6简便对象写法,所以名字一般比较规范,name另一个用处就是用在vue中的页面push.
this.$router.push("name")
header.vue,footer.vue
没什么好讲的,普通的组件,目前还不涉及到vuex的使用
- 渐变色之前不会用
- less的引入(使用绝对路径无效)
我前端都是自己瞎摸索,最喜欢的还是flex写法,省去了一堆float等的道道
index.vue
- min-height写法,有种Sticky Footer的感觉,我觉得非常好,之前没接触过(扒人家写的页面时拿过来的)
- 背景图片设置position,可以在屏幕拉伸的时候有延展的效果
-
line-heght:1.5 用来拓展行间距,以前我只知道用来居中(这个真的很丢人)
- 伪元素拓展一个div.(content需要设置一下)
顺便提一句,图片都是在人家网页的network中拿下来的,一张一张保存,有点麻烦,但vue又帮忙做了data话处理,不知道有没有人知道比较简便的拿多图的方式
脚本编写
这个是比较重要的,因为我写完一天就想发到远程去,每次手动发布真的是麻烦死,所以不管java还是web每个项目我都会去研究如何写脚本,这块也花了整一个下午进行编写
这里差不多都写了每一个步骤的目的,注意点:
1.远程连接我做了ssh免登陆配置,这块儿可以百度,不然输密码会终端脚本
2.rm这些命令要做判断处理,然后一定要稍微sleep一下,不然有些mv什么的会不成功
nginx的配置
server {
listen 80;
server_name vue.ipaozha.com; #域名可以有多个，用空格隔开
index index.html index.htm index.php; # 设置访问主页
root /product/vue-ipaozha;# 访问域名跟目录
location = / {
root /product/vue-ipaozha;
index index.html;
#如果想用history需要打开下面这个
#try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/Share/nginx/html;
}
# location /api/ {
# add_header 'Access-Control-Allow-Origin' '*';
# proxy_pass http://localhost:80/;
# }
}
- 还是不建议用history模式,好像是会出一堆的问题,web的vue项目原理就是vue.ipaozha.com域名下的所有请求,其实访问的都是单页面index.html,然后#后面的路径匹配会通过hash什么的进行渲染,这里基本上没有那种java里面的redirect,都是在同一个页面里面进行操作的.
- 网络请求这块可以通过nginx的方向代理过去,然后nginx本身能处理跨域,或者让后端进行cors支持也行,反正商量这来
- nginx如果在reload的时候弹什么没有pid的错误,这个是需要指定一下输出pid.log什么的文件的,网上百度一下就行. 反正远程服务器,linux这块儿,多弄弄其实也挺简单的.
nginx这块儿,也不需要会太过复杂的知识,但是基本的操作要会,要能看懂简单的配置.
总结
这是很简单的一期,主要是回顾下自己之前嫌碎的看的vue的流程,组件什么的,总不能看下就忘,看下就忘,这样跟没学有什么区别.后面应该会跟进下vuex的使用,web请求,然后弄个简单的java项目联动一下,稍微弄得正式点吧
iOS日渐式微,java又不能愉快的转岗
不知道路在何方,迷茫
网友评论