VUE(一)-VUECLI的使用和组件

写在前面

前几篇博客我们介绍了webpack

webpack是什么呢？

webpack就是前端资源模块化管理和打包工具，它根据依赖以及选定loader和plugin的规则把模块打包成可以部署资源，还可以将模块分割(多个entry即可)，等到时候再异步加载，而要它自动实现这些功能，你得提前编辑好配置文件。 

那么VUE-CLI是什么呢？

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。vue把webpack.config.js暴露的api封装成vue.config.js的api

基于 webpack 构建，并带有合理的默认配置（或者由客户自选的配置）；除了有webpack打包，还包含了node脚本、开发和生产模式的切换、ESLint配置（js代码纠错）等功能。 所谓的配置就是各种loader和plugin。cli即命令行

vue-cli使用步骤

1. 全局安装vue-cli包 npm install -g @vue/cli

2. 创建项目 vue create xxx

3. 进入目录 yarn-serve 开起webpack-dev-server

4. 你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

src：是我们的主要工作区，

public：里面放静态文件，不会改变的图片比如icon

assets：用来保存项目所需图片

components：存组件（commonFooter.vue、DetailHeader.vue、homeHeader.vue、list.vue）

pages：（存页面goodsDetail.vue、home.vue）

views：一个页面最外层的vue一般称为视图，里面的组件称为components

app.vue：一般是整个应用最外层包裹的vue

main.js 文件：渲染app.vue

vue的两个版本

我们查看官方文档会发现有很多版本，vue分为完整版和非完整版（runtime-only版本）两个大类，生产环境版本是指，注释删掉的，变量全部缩小的

我们可以通过

import Vue from 'vue' 

以及 

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script> 

引入vue

  我们通常用vue.min.js 和 vue.runtime.min.js，下面我将介绍他们的区别

vue组件的三种方法      

1. 从HTML中获取视图
2. 用JS构建视图 --runtime-only
3. 使用vue-loader即vue文件--runtime-only                         

======================================================

Vue非完整版：在.vue文件中定义视图

index.html 和 .vue文件 和 main.js 搭配

xxx.vue文件：

<template>             
  <div>
    {{n}}
    <button @click="add">
      +1
    < /button>
  </div>
</template>

<script>         
export default {      
   data(){ return {n:0} },   
   methods:{add(){ this.n += 1 } }
}
</script>

<style>

    这里写CSS 

</style> 

import Xxx from './xxx. vue' 

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

<div id="app"></div>

非完整版不支持从html里面获取视图（templete），只可从vue文件里拿到html视图，#app即视图的挂靠点,具体vue实例的语法以及render的语法先不提

我们在html文件中，只需提供了挂靠点（el）即可

我们在vue文件中，定义了视图，暴露出一个对象

我们在js文件中，将从vue文件传来的对象进行渲染

正常情况下需要我们自己手写h函数的参数，目的是把视图变成HTML标签（dom节点），但是我们可以用loader替我们做了

======================================================

Vue完整版：直接在html文件中定义视图

index.html 和 main.js 搭配使用

index.html

<div id=xxx>
  {{n}}
  <button @click= "add">+1< /button>
</div>

new Vue({
 el: '#xxx'
 data:{n:0}, // data可以改成函数
 methods:{add(){}}
 })

在html文件中，直接定义视图即可，el挂靠点是不会替换#xxx的，直接用

======================================================

<div id=app>
</div>

new Vue( {
  template:`
      <div>
       {{n}}
       <button @click= " add">+1</button> 
      </div>`,
  data:{n:0}, 
  methods:{add(){ this.n +=1 }}
}).$mount( ' #app' )

两者区别

完整版的视图可以写到js和html里面，非完整版只能写在.vue里面

在完整版里，视图直接定义在HTML文件中 （采用独特的语法v-if，v-for，@click）  ==>   vue就提供一个compiler（编译器）把采用特殊语法的HTML变成真实的DOM节点，并且可有js操作。

在非完整版里，没有compiler，它看到的视图就是一串xml的字符串，非完整版的运行逻辑是通过一个叫做Vue Loader 的 webpack  loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件，它会把import 语句中 的.vue结尾的文件 进行相应转化

完整版比非完整版多出一个compiler，多出40%的体积，而loader用户是不必下载的

单文件组件规范

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块。

vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。

它的js文件

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

import Xxx from './xxx. vue' 

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

render（h），h典型的回调函数，Xxx是一个对象，h('div', this.hi)    和   h(Xxx) 

本质上是一样的，创建标签变成dom节点

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。可以用@import “”引入外部css或scss文件，这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

vue默认规定路径中@就是指src目录，scss import时需要在@前面加~

单文件组件的弊端

SEO不友好，采用不完整版，html里面只剩下一个挂靠，seo本质上就是不停地curl，解决办法el里面加上东西即可，反正最后都会被替换掉。

meta标签 description，keyword 写好（不影响页面）

h1标签，a标签（写el里面）

写好等待curl即可

然后引入vue

CDN引入：script标签引入

webpack引入：默认使用非完整版

vue-cli引入：默认使用非完整版

命名规则

组件最好大写开头，文件名最好一致小写（windows不分大小写）

样式

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。