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 项目名

2. 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又不能愉快的转岗
不知道路在何方,迷茫