VUE脚手架项目（二）

什么是VUE脚手架，与html的区别

之前以html的形式的Vue.js是一款流行的JavaScript前端框架，一个用于创建用户界面的开源JavaScript框架，在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互

脚手架工具搭建的项目是把Vue作为一个模块,载入模块对待;在源码中引入vue模块，最终需要用构建工具载入模块；编写的文件以vue格式结尾，用Vue全新的方式进行统一的管理项目

vue中的模块文件结构(以Vue结尾的文件)

vue数据结构分为三部分：

1. 页面主体内容写在template节点内，相当于html页面的内容；只可以有一个根节点！！
2. Js的操作部分写在script标签节点内(本组件内使用this表示当前页面的组件对象)
3. 页面的样式渲染写在style节点内

脚手架创建出vue的项目结构

文件名	说明
assets文件夹	引入第三方图标样式
components文件夹	未来的页面(vue组件)
plugins文件夹的element.js文件	插件 :引入需要的插件
router文件夹	存放设置的前端路由控制
App.vue	默认页面(相当于Index.html)
main.js文件	整个脚手架核心配置，控制整个脚手架的运行的初始js

main.js文件结构说明

它控制着整个脚手架的运行的初始的JS. 在其中一般设定公共的依赖信息(设定全局变量)，以下是它结构的介绍：

引入JS

以这种方式可以引入插件，也可以引入组件、css

import Vue from 'vue'			//引入vue的函数库
import App from './App.vue'		//引入vue中默认的首页
import './plugins/element.js'	//引入element的Js
import './assets/css/global.css'//引入css样式
import {Button,Form} from 'element-ui' //引入elementUi的插件

一行表示：表示引入vue.js函数库 (相当于html <srcript src = ‘xxx/vue.js’>)

1. import： 导入文件
2. Vue / App ： 为引入的文件指定引用名字(可以自定义)
3. from ‘xxx’ ： 表示引入文件的路径
   
   

二四行表示: 表示引入css样式 (相当于html中<link type="text/css" href="css/test.css" />) ‘’
一行表示： 如果需要导入一个插件中的多个组件，需要用逗号分割

实现父子组件的参数的传递

Vue.prototype.$http = axios

Vue.prototype： 实现了父子组件属性、对象、参数的传递
$http ： 定义全局变量名字(也可自定义名)；$表示命名规范，表示父组件传子组件；子组件可以通过vue. $http , 获取当前对象
= axios ： 将axios 对象传递给子组件

实现父子插件的传递

Vue.use(VueQuillEditor)

Vue.use(插件)： 实现了父子组件与插件的传递
VueQuillEditor ： 表示有个VueQuillEditor对象的引用插件传递给子组件使用

实例化vue

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router ： 表示定义路由的对象，当Key和Value名字一致时默认写一个即可
render: 它指向的是一个函数原型(原型代码function(h){h(App)})
h => h(App) ： 相当于一个回调函数，表示绑定的首页；App是首页的对象引用；
mount(’#app’)： 表示绑定App件组模板中带id = app 的div元素

app.vue文件结构说明

1. App.vue类似于Index.html，通过router-view实现组件的动态的展现
2. 该路由占位符中显示的组件内容，通过路由进行控制
3. 它也是一个组件，vue核心是将所有组件合成绘制成一个大的项目

Router文件夹中index.js文件说明

const router = new VueRouter({
  routes
})
export default router

export default： 表示对外声明路由对象子组件向父组件传递数据

脚手架加载流程图

plugins下的element.js说明

import Vue from 'vue'
import {Button}
Vue.use(Button)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

第一行： 代表引入vue数据源
import{Button} ： 表示引入element的插件，如element里标签为：<el-button> 则这里写Button
Vue.use(Button)： 表示Vue实现父子插件的传递，可供其他插件使用
第四行 ： 将组件挂载到Vue对象中 用户可以使用this关键字调用
第五行 ： 通过MessageBox函数定义 消息提示框

箭头函数和function函数的区别

function fun () {}是ES5中的中定义的函数
() => {}是ES6中出来简化的新函数

1. 箭头函数不能作为构造函数,不能使用new关键字
2. this的指向不同；

ES5函数的this取决于谁调用，那么this就指向谁；ES6箭头函数本身没有this，箭头函数的内部this，指向了其外层作用域，谁定义了函数，this就指向谁。也就是说对于箭头函数来说，并没有自己的
this ，它的 this 将始终指向让它生效的对象，即它的外部调用者。

Element UI汇集vue模板可供使用

https://element.eleme.cn/#/zh-CN/component/upload

脚手架安装使用jQuery

1.停掉vue服务
2.找到main.js加上一句话：import $ from 'jquery'
3.找到package.json，在"dependencies"下加入一句话"jquery":"^2.2.1",
4.找到vue.config.js文件 , 在里面加入一句话：const webpack = require('webpack') ,
5.然后找到configureWebpack，在大括号里面加入代码

plugins:[new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery"})]

如果没configureWebpack，可以找到module.exports,在里面写

 configureWebpack :{plugins:[new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery"})]}

6.启动vue服务，jquery就能用啦！