1、vue-cli 使用
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦，vue官方提供了一个快速搭建vue项目的脚手架，使用它能快速的构建一个web工程模板。
官网： Vue CLI
- 安装vue-cli3命令：
npm install -g @vue/cli@3.x
- 创建项目：
vue create my-project
- 运行项目
npm run serve
2、vue组件化及其通信
- 单文件组件
- 什么是组件？
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。
方便重复使用,提高开发效率。
- 组件通信
常见使用场景可以分为三类：
-
- 父子通信：一般通过props 和 $emit 实现
-
-
- 什么是props? 例如el-button，我们使用它时，传递了不同的type，而el-button组件就会根据不同的type属性值，渲染不一样的按钮。
-
-
-
- 什么是$emit
-
如el-select下拉框组件，当选中值发生变化时，它会执行 this.$emit('change','目前选中值')。
我们在页面中引用el-select 的地方使用事件监听 @change，接收子组件传来的change事件并进行处 理。
-
- 兄弟通信：
Bus 或者 Vuex
-
- 跨级通信：
Bus；Vuex；provide / inject API、$attrs/$listeners
3、 vue-router使用
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。地址：https://router.vuejs.org/zh/
4、 vuex使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 是什么？ | Vuex
5、 Axios使用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
官网：使用说明 · Axios 中文说明 · 看云
6、 UI框架-后台管理系统端
iview: iView - A high quality UI Toolkit based on Vue.js
element-ui: Element - The world's most popular Vue UI framework
7、 项目目录
- vue-cli3下的目录结构
- 与vue-cli2工程目录的区别
-
- vue-cli3移除了配置文件目录：config 和 build 文件夹，增加了vue.config.js文件
- vue-cli3移除了static 静态文件夹
- vue-cli3新增了public文件夹，将index.html移动到了 public 中。
常用单页面模版 xxx.vue
<template></template><script>
export default {name: '',mixins: [],components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},destroyed () {},methods: {}
}
</script><style scoped lang="less"></style>
