vue-cli

修改于 2017年11月13号 main.js修改理解

vue.js学习内容

1. vue.js框架介绍
2. vue-cli 脚手架 搭建基本代码框架
3. vue-router 管理插件管理路由
4. vue-resource Ajax通信 axios通讯
5. webpack 搭建工具
6. es6+eslint eslint:es6代码风格检查工具
7. 工程化 组件化 模块化
8. 移动端常见的开发技巧
   • flex弹性布局
   • css stickyfooter
   • 酷炫的交互设计

1. vue.js介绍

• Vue-cli是vue的脚手架工具

  1. 目录结构
  2. 本地调试
  3. 代码部署
  4. 热加载
  5. 单元测试

• vue-cli的文件夹和文件分析

  • build/config 文件夹 webpack配置相关

  • node_modules npm包安装依赖

  • src 存放的项目源码

  • static 第三方静态资源 .gitkeep 当文件夹为空的时候也提交到github仓库

  • .babelrc babel转换

    // babel的配置文件
    {
      "presets": ["es2015", "stage-2"],  //预设插件，es2015babel预设需要安装的插件  stage-(0-3) 
      "plugins": ["transform-runtime"], //装换es6
      "comments": false  //不支持注释
    }
    

  • .editorconfig 编辑器设置

    root = true
    
    [*]
    charset = utf-8
    indent_style = space  //缩减方式  空格
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
    

  • .eslintignore 忽略eslint检查文件

    build/*.js
    config/*.js
    
    // 忽略build和config文件的检查
    

  • .eslintrc.js eslint配置

    module.exports = {
      root: true,
      parser: 'babel-eslint',
      parserOptions: {
        sourceType: 'module'
      },
      // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
      extends: 'standard',
      // required to lint *.vue files
      plugins: [
        'html'
      ],
      // add your custom rules here  修改规则  配置为0的话就是不用这个规则
      'rules': {
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0  //开发环境允许debugger,正式环境不可以
      }
    }
    

  • .gitignore 提交的时候忽略的目录

  • index.html 入口文件

• 代码编译过程

  1. 路口根目录下面index.html

  2. main.js 入口js文件 src下面的main.js

      import Vue from 'vue'
      import App from './App'
     
      Vue.config.productionTip = false
     
      /* eslint-disable no-new */
      new Vue({
          el: '#app',
          template: '',
          components: { App }
      })
     
     //绑定dom元素#app， 然后替换成template中的模板
     //  注册组件，让App 自定义元素可以使用  
     

  3. App.vue模块

     每一个组建分三个部分 1. template 2. script 3. style

     // hello.vue
     
     
     
     
     
     
     

     ​