vue脚手架基础

vuecli 脚手架

利用webpack 搭建了 vue 自动化开发环境
官网：https://cli.vuejs.org/zh/guide/installation.html

//安装
cnpm i @vue/cli -g
//测试
vue --version

分析脚手架 生成项目目录结构

<link rel="shortcut icon" href="xxx.ico"/>

vue-demo
  node_modules // 项目依赖存放目录
  public   // 存放静态资源的目录
    favicon.ico // 网页标题图标
    index.html // 项目唯一的html文件
  src   // 源码目录
    assets  
      //存放静态资源目录（项目中的静态资源如css/js/字体图标都最好在这里）
      // 放在这个目录中的静态资源 webpack 会去优化处理，public静态资源webpack不会做任何处理，run build之后，public中的静态资源会原样输出，assets中的静态资源路径写相对路径、public中的写绝对路径
    components // 存放公共组件的目录
    router // vue路由的配置目录 
      index.js 
    store  // vuex目录
    views // 存放路由组件的目录
    App.vue  // 根组件  放路由出口 router-view
    main.js  // 入口函数 webpack 会自动将入口函数 引入到index.html上
    babel.config.js  // babel的配置文件
    package.json //项目配置文件

项目启动过程

单文件组件

webpack vue-loader 解析 .vue结尾文件，将.vue结尾文件自动解析成vue的组件

.vue
<template>
	<div>
    	
    </div>
</template>
<script>
	export default {
        data () {
            return {
                
            }
        },
        methods: {},
        xxx
        xxx
        x
    }
</script>
<style lang="sass|scss|less|stylus" scoped>
	/*
    当前组件的样式
    scoped 定义 当前style标签中的样式 只针对当前组件有效 一般需要加
    */
</style>

es6模块化

基于webpack 万物可模块化（不止是js还包括css/字体图标/图片xxxx）,可以在任意的js文件中引入

1，一个文件如果没有提供接口，那么整个文件就是一个接口，可以直接引入，在引入的文件中运行该文件
2，提供接口
  (1)，一个文件提供多个接口
  a.js
      export const a = 10;
      export const b = ()=>{xxx}
      export const c = {}
     或者
      const a = 10;
      const b = ()=>{}
      const c = {}

      export { // 注意：a,b,c不是简写 语法规定
        a,
        b,
        c
      }
    引入接口
    b.js
    注意：导出多个接口 对应解析 解析成 导出一个对象 {a,b,c}
    import { a, b, c } from './a'
    import * as obj from './a'  // obj {a:10,b:xx,c:xx}
  (2) 一个文件 默认只 导出一个 接口
    export default 值

    引入
    import 变量 from '路径'

使用过程

在router
  index.js中定义路由规则
  在 views目录中 定义路由组件
  在components目录中定义 公共的组件
  在组件的
    style标签中定义当前组件的样式
    style标签要加 scoped属性 当前样式只针对当前组件有效不会影响其后代组件以及其他组件

    想要穿透scoped的限制
    /deep/ 选择器 {
      
    }

  任意一个资源 如 css 如字体图标 想要全局使用（在任意一个组件中都能作用到）
  那么直接在main.js中引入即可

自定义配置

在根目录下创建 vue.config.js

module.exports = {
  devServer: {
    port: 9527,
    open: true //自动打开
  },
  linOnSave: false // 关闭eslint提醒
}