初学vue遇到的坑！！（一）

创建Vue应用

---

Vue格式规则控制

去除格式规范

之前版本方法为
在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件。将以下代码删掉或注销：

{
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre',
   include: [resolve('src'), resolve('test')],
   options: {
     formatter: require('eslint-friendly-formatter')
   }
 }

更新了最新的vue之后的是：
在项目中代开 bulid 文件夹下的 webpack.base.config.js 文件。将以下代码删掉或注销：

...(config.dev.useEslint ? [createLintingRule()] : []),

Vue页面切换和嵌套

路由控制

根据不同的路由名称跳转页面，举个最基本的栗子。

//index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/content/Login'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }，{
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})
//APP.vue
<template>
  <div id="app">
    <router-view/>//切换的内容在此处显示！ 但有个问题 如果显示位置不在这怎么办！ 当然 我用嵌套解决了-_-|
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

嵌套页面
这里嵌套需要用到components。这里推荐个博客详解components的http://blog.csdn.net/borderbox/article/details/76638975
了解这个之后就简单了！

<template>
<section class="p-section" id="FristPage_b">
                <Home></Home>
            </section>//第一个页面
<section class="p-section" id="SecondPage_b">
                <List></List>
            </section>//第二个页面
<section class="p-section" id="ThridPage_b">
                <User></User>
            </section>//第三个页面
</template>
<script>
import Home from './content/Home'//引入第一个页面
import List from './content/List'//引入第二个页面
import User from './content/User'//引入第三个页面
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  }，
  components: {//生成相应的标签
        "Home": Home,
        "List": List,
        "User": User
  }
}
</script>