Vue2实践揭秘 - 书，读后作了一个简单摘要

Posted 2020-10-02 前端js

jd上买了本实践相关的， 看过后，的确是实践项目后的一些分享，有些网上的一些vue2教程没怎么提及

-----------

看完了，有些启发，作了个简单摘要作记录， 对vue2感兴趣的，可以自己网上搜些教程看或买本书看，书是对这的一个梳理。

以下内容为看后，觉得有些帮助的.... 分享如下：

-----------------------------------

第1章
a.render的使用

import Vue from \'vue\'
import App from \'./App.vue\'

new Vue({
el:\'#app\',
render: h => h(App);
})

 

b.组件模板
<template>
<div id="App"></div>
</template>

<script>
export default{
name:\'app\'
}
</script>

<style>
</style>

 

如果希望样式只对当前组件起作用
<style scoped>
@import \'./assets/todos.less\'
</style>

------------------
第2章
a. 用脚手架vue-cli 创建项目
vue init webpack my-project

b. 命名方式约定
src 目录下： 公共组件（components） 、指令(directives)、过滤器(filters)

目录名小写，多于2个的中间用 ‘-’ ，如： login
vue文件名，都用大写驼峰 ，如： LoginForm.vue ItemLists.vue
目前的入口文件用小写 index.vue

c. 组件引用用 别名取代路径引用
在 webpack.base.config.js 中 ， 如：
module.exports = {
.....
resolve:{
extension:[\'\',\'.js\'],
alias:{
\'bs-select\':\'bowe_components/bootstarp-select/dist/js/select.js\'
}
}
}

-----
其他地方引用
import Selector from \'bs-select\'

------------------
第3章
a. 路由，在main.js中加入
import Vue from \'vue\'
import VueRouter from \'vue-router\'
Vue.use(VueRouter）

b. 众多的路由信息，最好写成一个独立的js文件，如 routes.js
在main.js中修改
import Vue from \'vue\'
import App from \'./App.vue\'
import router from \'./config/routes\'

new Vue({
el:\'#app\',
router
render: h => h(App)
})
----------
routes.js 中如下

import Vue from \'vue\'
import VueRouter from \'vue-router\'

import Home from \'./Home.vue\'
import Cart from \'./Cart.vue\'
import Me from \'./Me.vue\'

Vue.use(VueRouter)

export default new VueRouter({
mode:\'history\',
base: __dirname,
routes:[
{path:\'/\',component:Home},
{path:\'/Cart\',component:Cart},
{path:\'/Me\',component:Me}
]
})

c. 页面上不直接使用路由定义， 如： <router-link to="./Cart"></router-link>
路由中要调整更改为
routes:[
{name:\'Home\',path:\'/\',component:Home},
{name:\'Cart\',path:\'/Cart\',component:Cart},
{name:\'Me\',path:\'/Me\',component:Me}
]
------
页面上 <router-link :to="{name:\'Home\'}" ></router-link> , 这个地方是:to ，这是要传入一个对象而不是字符串

如是动态路由 <router-link :to="{name:\'BookDetails\',params:{id：1}}"></router-link>

history中router-link的三种模式：
默认调用 push , replace , append
<router-link :to="{name:\'Home\' replace}"></router-link> , 就没有histiory 记录
<router-link :to="{path:\'releatice/path\' append}"></router-link> , 如原来是a,现在的单是b, 最终效果是 a/b

------------------
第4章
组件的对应关系
组件注册名称 BookList ， 模块标记 book-list

html 中
<div class="section">
<book-list :books="latestUpdated" heading="最新更新">
</book-list>
</div>
<div class="section">
<book-list :books="recommended" heading="编辑推荐">
</book-list>
</div>

在home页 中把他引入
import BookList from \'./components/BookList.vue\'
export default{
data(){
.....
},
components:{BookList},
....
}

------
服务端取数据， 安装 vue-resource
main.js 中加入并使用
import VueResource from \'vue-resource\'
Vue.use(VueResource)

还可以在 new Vue 时做点事，如
new Vue({
http:{
root:\'/api\',
headers:{}
},
....
})

-----
使用了vue-resource 后， 会自动注入一个 $http的对象

原来的jquery ajax ,如：
$.get(\'/api/home\').then(res =>{
self.annoouncement = res.annoouncement
self.slides = res.slides
self.latestUpdated = res.latestUpdated
self.recommended = res.recommended
})

可以优化为

this.$http.get(\'/api/home\').then(res =>{
for prop in res.body{
this[prop] = res.body[prop]
}
},(error) =>{
console.log(\'获取数据失败\')
})

---------
第5章 测试内容相关，先放放
调试 Vue-DevTools

----
第6章
视图和表单处理
推荐了一个模板 UIkit
更多细节需要实践...... more TODO

http拦截器 inteceptor ，基本用法
Vue.http.interceptors.push((request,next)=>{
//请求发送前的处理逻辑

//如加入 弹窗等....
next((response) =>{
//请求发送后的处理逻辑

// 关闭弹窗

return response
})
})

----
第7章
vuex 的使用, 较多
data的替代者 ： state 和 getter
action 操作的执行者
只用 mutation 修改状态

服务分离