Vue学习的笔记
前端的进阶，小东也是粗略认识，个人偏见：例如以MVVM 模式的Vue前端渐进式框架，将前端的任务放到了视图层，更关心业务逻辑。
为啥有这种进化呐？人们的需求的改变，催使技术的进阶，客户想要前端美观，快速，这涉及到前端的优化
前端的优化可以有：
- 源代码压缩、HTML5语义标签、更少的二次Get请求（资源文件整合）、图片使用精灵图，这些都是从带宽流量层面来优化的；
- 其次程序员编码方面的诉求，希望前端的编码更专注业务逻辑，视图层DOM操作交给框架就好了，更加清晰、分模块化的编写程序，得以实现合作完成更加高效开发。
- 浏览器兼容性问题，越来越多的浏览器，这就需要对各浏览器兼容提出要求，使用
webpack，babel等工具使得ES2015编译以支持各个浏览器，前端工作更加专注业务逻辑。
我在D盘安装了Node，并且把Node的本地仓库移到了D盘下
整个网页的入口组件App.vue，入口的js是main.js
0x01 构建项目
// 命令行下 vue init webpack vue01 ... //这部分自己设置，配置信息 cd vue01 npm install -g npm run dev //运行起来可以实时看到效果 npm start //同上 ... //一系列的开发工作 nom run build //项目做好后发布，生成静态文件index.html在dist目录下(发布时)
package.json中设置指定版本：
"dependencies": {
"vue": "2.5.16",
"vue-router": "3.0.1"
},
0x02 导入Bootstrap
npm install bootstrap --save --save-exact
main.js可看作程序的全局文件，其中引入：
import 'bootstrap/dist/css/bootstrap.min.css'
0x03 导入axios,vue-axios
是个啥？https://github.com/axios/axios
npm install --save --save-exact axios vue-axios
main.js引入：
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
项目中调用方法：
this.axios.post("https://api.top15.cn/piclist.php").then(response => {
this.content = response.data;
})
如上 https://api.top15.cn/piclist.php 的跨域问题，我在后端源码中设置了 header('Access-Control-Allow-Origin: *'); ，大家就可以随便请求，也就不存在跨域的情况了。
0x04 导入自定义CSS
在assets目录下新建一个style.css这样子，写入想要的样式，或者一些前端主题样式，在对应的组件使用import './assets/style.css'即可以相对路径的方式进行引入
0x05 组件
0x06 工程结构
- build目录：webpack的设置文件
- config目录：工程设置文件
- src目录：项目源代码编写文件
- static目录：存储静态资源文件
- index.html：网页启动的入口文件
0x07 路由
在 src 目录下的router 目录下的 index.js 编写我们的路由信息
使用import HelloWorld from '@/components/HelloWorld'导入组件，路由信息在下方的Router中增删改查
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import News from '@/components/News'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name:'About',
component: About
},
{
path: '/news',
name: 'News',
component: News
}
]
})
在 src 目录下的 main.js，自动引入了 router 目录下的 index.js（import router from './router'），在入口组件中注册 router 对象
整体的流程：
- 添加Vue：在
components目录下新建几个vue文件（组件） - 添加路由：在
router目录下的index.js中注册自己写的vue组件 - 添加链接：在
App.vue中添加<router-link to="/">首页</router-link>这样的代码
0x08 动态路由
在URL中含有参数
//更新路由，再次初始化，在Player.vue中
beforeRouteUpdate( to, from , next){
this.detail = this.getPlayer(to.params.uid);
next();
},
router/index.js 中引入组件并设置如下：
{
path: '/player/:uid',
name:'Player',
component: Player
}
0x09 嵌套路由
在动态路由基础上附加嵌套URL（组件）
在路由中引入组件，设置children：
在对应的Player.vue中设置的<router-link :to="xxx"></router-link>，参数to需要绑定
其他的和动态路由中需要注意的相同。
编程路由…
0x09 多组件
…
0x10 重定向 | 别名
redirect
alias
0x11 路由多参数
从路由取参数
路由设置：
调用：
0x12 总结
框架确实好用，逻辑性也增强了，两天时间内，浑浑噩噩速成Vue…，学艺不精，后期写个小东西练练手吧~2019-3-13 23:30:32