vue-cli工程化

1.vue-cli(脚手架): 成熟的vue项目架构设计 –> 本地测试的服务器(热加载) –> 集成打包上线方案

2.vue-cli的要求: node.js(>=4.0) –> git –> 一个能使用node命名终端.
3. (安装vue-cli)–> npm install vue-cli -g –>(初始化项目) vue init webpack my-project –>(安装项目的依赖) npm install –> (在localhost启动测试服务器) npm run dev –> (生成上线目录) npm run build

4.node官网(系统)–> window系统(cmd) –> npm -v(测试安装) –> npm(包管理工具)

5.npm : 计算机 –> 高级系统设置 –> 环境变量 –> PATH(复制) –> 查找(地址) –> 保证npm(npm.cmd)在里面

6.git(window.destop)

7.cnpm的安装: npm install -g cnpm (缺点: 版本跟npm可能不一样)
–registry=https://registry.npm.taobao.org

8.vue init webpack vuedemo3 一路回车,除了ESLint(严格模式)选择no

9.源码(config) –> 静态文件(static) –> 首页入口(index.html) –> 依赖模块(package.json)

10.dev : 脚本

11.单独导出一部分 : 用一个变量去接收 let com = { 代码 },
导出: export { com } : 变量的导出需要大括号包裹
接收: import { com } from ‘./components/hellow’

12.正常输出是export default { 代码 } 接收 import com from ‘./component/a’

13.let 是当前作用域内有效 ,块级作用域,{只在大括号里面有效}
14.data() { 代码} : es6简写

15.data函数的作用: data作为组件,可能被其他不同的组件使用,它是一个类的概念,如果只是一个对象,当一个组件的修改,其他的组件会被修改data,采用函数return的方式,形成自己的实例.

16.单文件组件 -.vue –> vue-cli初始化项目 –> vue-cli项目中在es6用到的语法
17. 常量的声明 : const route = new router;

18.vue-router –> 单页面应用 –> 通过ajax –> newwork(查看name)–> 前端路由(请求没有的) –> 传统的切换,服务器(把整体的资源请求一次)

19.安装前端路由 : npm install vue-router –save
在入口文件里引入 : import VRouter from ‘vue-router’ 使用 : Vue.use(VRouter) (路由插件)
实例化 : let router = new VRouter({});
插入到根的实例里面,挂载在 new Vue ({ router ,})

20.路由的切换 : routes : [{},{}],对象里面有path:’/apple’,component:Apple(组件名首字母要大写 ,映射到相应的文件)

21.mode的默认值是哈希值(url地址栏带 # 号),可以设置mode:’history’(像正常的url一样)

22.vue的路由是带有哈希值的,需要设置为 mode:’history’

23.router-view 标签显示视图

24.router-link标签(内置指令) –> :to=’{path:’apple’}’ 跳转到相应的页面(动态的绑定)

25.动态绑定url后面的内容(path:’/apple/:color’) –> 组件内部获取服务(路由) –> 设置一个按钮,触发点击事件 –> 在methods写方法 (this.$route.params获取的是动态绑定数据地址)

26.嵌套路由: children:[{path:’red’,component:Apple},{path:’blue’,component:AppleB}]
子路由的path开头不需要写/

27.所有的子组件都需要在上边引入,才能使用

28.router-link标签可以直接跳转子页面,to的对象动态绑定时,需要传入对象或者字符串.传入变量会报错.
需要跳到跟目录,需要to = “/apple”(开头加斜杠)

29.具名插槽 :to=”{name:’applePage’}”

30.声明式导航 : tag= ‘标签名’, router-link标签

31.编程式导航: router.push({ path: ‘apple’})
router.beforEach() : 路由切换,异步操作,导航守卫,检查登录

32.在路由对象中起一个name名字,在router-link里面可以进行to的动态的绑定 :to=”{name:’applePage’}”

33.在路由的对象中,component一个对象,视图显示不同的组件 如: component:{ viewA:Apple,ViewB:RedApple}

34.路由的重定向:{ path:'/',redirect:'/apple' }(前端的路由重定向)

35.key-alive标签做路由的存储

36.路由的过渡 : transition标签,name名字,key-alive标签包裹 router-view

37.router-link-active :

38.路由map 路由视图 路由导航
路由参数 嵌套路由
命名路由和命名视图
重定向