vue-cli

2017-05-24 本文已影响87人 sunny519111

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

vue.js学习内容

vue.js框架介绍
vue-cli 脚手架搭建基本代码框架
vue-router 管理插件管理路由
~~vue-resource Ajax通信~~ axios通讯
webpack 搭建工具
es6+eslint eslint:es6代码风格检查工具
工程化组件化模块化
移动端常见的开发技巧
- 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 入口文件

代码编译过程

路口根目录下面index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sell</title>
  </head>
  <body>
    <app></app>  
    <!-- built files will be auto injected -->
  </body>
</html>
<!-- js和css动态的插入到页面  -->

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: '</App>',
     components: { App }
 })

//绑定dom元素#app， 然后替换成template中的模板<App></App>
//  注册组件，让App 自定义元素可以使用

App.vue模块

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

<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>  <!--下面的script components定义了自定义的标签-->
    <p>
      Welcome to your Vue.js app!
    </p>
    <p>
      To get a better understanding of how this boilerplate works, check out
      <a href="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
      It is also recommended to go through the docs for
      <a href="http://webpack.github.io/" target="_blank">Webpack</a> and
      <a href="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
      If you have any issues with the setup, please file an issue at this boilerplate's
      <a href="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
    </p>
    <p>
      You may also want to checkout
      <a href="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
      <a href="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
    </p>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello  <!-- 定义<hello></hello>标签 -->
  }
}
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
</style>

// hello.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
// 导出模块 vue会处理导出相应的样式，模版，数据 
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: red;
}
</style>

vue-cli

vue.js学习内容

1. vue.js介绍

猜你喜欢

热点阅读