修改于 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的脚手架工具
- 目录结构
- 本地调试
- 代码部署
- 热加载
- 单元测试
-
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">  <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>
-
