Vue day10

Vue cli
基于webpack构建的脚手架
cnpm i -g @vue/cli
安装之后可有通过
vue --version检测其版本号

创建项目
vue create 项目名字 项目名字不能包含大写名字

eslint 格式化代码插件

可视化创建
vue ui

项目目录结构
public用来存放静态资源
src源码目录
assets放资源目录，这里面的静态资源 webpack会处理，路径写相对路径，public写绝对路径
router //路由配置
index
views 存放路由组件的目录
app.vue 根组件
main.js webpack的入口文件
babel.config.js babel配置文件
package.json 项目配置文件

webpack运行过程
其会搭建许多环境以及创建服务器
入口文件main.js会自动挂载到index.html
服务器会自动打开index.html
main.js中引入资源 会自动挂载到index.html
其可以将任意资源当成模块依赖，只需在main.js中引入即可
在main.js中引入，相当于index.html中引入

main里面的render是一个方法
值是一个函数，功能是生成一个dom结构（参数组件的template的结构）
同时替换$mount()绑定dom

es6模块化
webpack搭建了es6开发环境
webpack有loader 解析器（不同的loader，用于解析不同的文件在js中的支持）
有了这些loader，就可以再js中引入任意类型的资源，比如js css img 字体图标，还有vue的单文件组件
webpack构建的环境中可以使用es6的模块化或者node模块化（引入任意资源）

1.如果一个文件没有导出任何接口 （如js未导出接口，或者其他类型文件比如css）
可以直接引入 import "路径" node（require）
.js .json .vue 后缀文件的后缀可以省略
2.一个文件，导出多个接口
第一种方法：导出文件

export const a = 10
export const b = 80
export const c = () => {
  console.log(123)
}

引入文件
import { a, b, c } from './utils/ceshi' //eslint规定，其必须要引用过使用，否则会报错
import * as quanbu from './utils/ceshi' //引入全部，*代表全部 as之后然后起个别名

第二种方法：
导出文件

const a = 10
const b = 80
const c = () => {
  console.log(123)
}

export {
  a,                                   //这是固定写法，不是es6的属性同名缩写
  b,
  c
}

引入文件通第一种

3. 一个文件只导出一个接口 （只能）
   导出文件

export default {
  d: {
    aa: 10,
    bb: 20
  }
}

导入文件
import import suibian from './utils/dan'

注意：
模块化 每一个模块的 文件 都有一个单独的作用域
vue单文件组件
以vue结尾的文件 webpack通过vue-loader将.vue文件自动转换成一个vue组件对象
.vue中的template会自动挂载到组件对象中，style会自动挂载到template中，
安装vscodesnippets可以用vbase快速生成代码，导出之后可以再router文件夹index引入这个文件
import Home from '@/views/Home.vue' @是预设的设置，表示src文件夹，后期可以自己设置

如果想在一个路由组件中使用公共的子组件，可以

<template>                                      
  <div>
 <Hello></Hello>                    //标签使用此子组件

  </div>
</template>

<script>
import Hello from '../components/HelloWorld'          //先引入这个组件对象
export default {
  components: {                            //再在父组件使用components属性注册此子组件
    Hello
  }
}
</script>

.vue里面的style默认会将h2这种选择器编译成其他组件也受样式影响
<style lang="scss" scoped >给style加上scoped属性其就会产生一个作用域，就会使让style只作用于当前组件
/deep/ h1 /deep/ 深度选择器 穿透scoped选择器限制
在使用ui组件库，如果需要使用自定义样式，需要加/deep/

路由懒加载
Vue会在加载的时候默认加载引入引入的所有组件，可以使用路由懒加载，提高首屏加载速度
tips：es6引入模块import是顶部引入，预加载
懒加载
component: () => import('../views/About.vue')

自定义脚手架配置项
根目录下，新建vue.config.js，配置好之后重启服务器
由于webpack是基于node开发的，所以要在里面写入module.exports
配置参考

const path = require('path')
module.exports = {
  devServer: { // 配置服务器
    port: 9527, // 配置端口
    open: true // 配置是否自动打开
  },
  lintOnSave: false, // 配置 eslint 格式化
  chainWebpack: config => { // 配置路径别名
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('assets', path.join(__dirname, 'src/assets'))
      .set('components', path.join(__dirname, 'src/components'))
      .set('views', path.join(__dirname, 'src/views'))
      .set('utils', path.join(__dirname, 'src/utils'))
      .set('api', path.join(__dirname, 'src/api'))
      .set('mixins', path.join(__dirname, 'src/mixins'))
  }
}