vue-demo(初級)

在使用WebStorm前把字符編碼等等設置好!
使用WebStorm打開vue項目等待ide索引加載完成


注意要讓WebStorm能夠建立vue文件須要如下步驟:

<template>

</template>

<style>

</style>

<script>
    export default {
        data: {

        },
        methods: {
            
        }
    }
</script>

demo1 構建一個簡單的Vue導航欄菜單實例

1.新建組件文件夾（pages）及文件（index、userCenter、userInfo）：

index.vue代碼：

<template>
    <div>
        <p>這是首頁</p>
    </div>
</template>

<style>
    p{
        display: block;
        background: #ffe87c;
    }
</style>

<script>
    export default {}
</script>

userCenter.vue代碼：

<template>
    <div>
        <p>這是我的中心</p>
        <router-link to="/userCenter/userInfo">用戶信息</router-link>
        <router-view></router-view>
    </div>
</template>

<style>
    p{
        display: block;
        background: #d6e9c6;
    }
</style>

<script>
    export default {}
</script>
</style>

userInfo.vue代碼：

<template>
    <div>
        <p>個人名字是：Heaton</p>
    </div>
</template>

<style>
    p{
        display: block;
        background: #77FFFF;
    }
</style>

<script>
    export default {}
</script>

2.在路由配置文件中，導入新建的組件。（index.js咱們不用了）

在router文件夾下新建router.js代碼：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/HelloWorld'
import Index from '../pages/index'
import UserCenter from '../pages/userCenter'
import UserInfo from '../pages/userInfo'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        },
        {
            path: '/index',
            name: 'index',
            component: Index
        },
        {
            path: '/userCenter',
            name: 'userCenter',
            component: UserCenter,
            children: [
                {
                    path: 'userInfo',
                    name: 'userInfo',
                    component: UserInfo
                }
            ]
        }
    ]
})

3. 在項目入口App.vue中創建導航欄，代碼以下：

App.vue代碼:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>這能夠看作是導航欄</p>
    <router-link to="/index">首頁</router-link>
    <router-link to="/userCenter">我的中心</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.修改mian.js

將import router from './router'
改成import router from './router/router.js'

5.啓動項目

npm run dev

6.錯誤總結

WebStorm的js文件報錯：Export/Import declarations are not supported by current JavaScript version

.Vue 文件 ES6 語法 webstorm 中的一個識別Bug

添加 type 類型 指明爲: text-ecmascript-6 親測有效。

type="text-ecmascript-6"

vue-cli 報錯 http://eslint.org/docs/....

✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 0 spaces but found 4
  src\pages\index.vue:15:1
      export default {
   ^

  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 2 spaces but found 8
  src\pages\index.vue:16:1
          data: {
   ^

  ✘✘  https://google.com/#q=vue%2Fno-shared-component-data  `data` property in component must be a function
  src\pages\index.vue:16:9
          data: {
           ^

  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 2 spaces but found 8
  src\pages\index.vue:18:1
          },
   ^

  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 2 spaces but found 8
  src\pages\index.vue:19:1
          methods: {
   ^

  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 2 spaces but found 8
  src\pages\index.vue:21:1
          }
   ^

  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 0 spaces but found 4
  src\pages\index.vue:22:1
      }
   ^

  ✘✘  http://eslint.org/docs/rules/no-multiple-empty-lines  Too many blank lines at the end of file. Max of 0 allowed
  src\pages\index.vue:24:1

   ^


✘✘ 8 problems (8 errors, 0 warnings)


Errors:
  6  http://eslint.org/docs/rules/indent
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  https://google.com/#q=vue%2Fno-shared-component-data


  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 0 spaces but found 4
  src\pages\userCenter.vue:17:1
      export default {}
   ^

  ✘✘  http://eslint.org/docs/rules/no-multiple-empty-lines  Too many blank lines at the end of file. Max of 0 allowed
  src\pages\userCenter.vue:19:1

   ^


✘✘ 2 problems (2 errors, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/indent


  ✘✘  http://eslint.org/docs/rules/indent                   Expected indentation of 0 spaces but found 4
  src\pages\userInfo.vue:15:1
      export default {}
   ^

  ✘✘  http://eslint.org/docs/rules/no-multiple-empty-lines  Too many blank lines at the end of file. Max of 0 allowed
  src\pages\userInfo.vue:17:1

   ^


✘✘ 2 problems (2 errors, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/no-multiple-empty-lines
  1  http://eslint.org/docs/rules/indent


  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 2 spaces but found 4
  src\router\router.js:11:1
      routes: [
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 4 spaces but found 8
  src\router\router.js:12:1
          {
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:13:1
              path: '/',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:14:1
              name: 'Hello',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:15:1
              component: Hello
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 4 spaces but found 8
  src\router\router.js:16:1
          },
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 4 spaces but found 8
  src\router\router.js:17:1
          {
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:18:1
              path: '/index',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:19:1
              name: 'index',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:20:1
              component: Index
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 4 spaces but found 8
  src\router\router.js:21:1
          },
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 4 spaces but found 8
  src\router\router.js:22:1
          {
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:23:1
              path: '/userCenter',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:24:1
              name: 'userCenter',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:25:1
              component: UserCenter,
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:26:1
              children: [
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 8 spaces but found 16
  src\router\router.js:27:1
                  {
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 10 spaces but found 20
  src\router\router.js:28:1
                      path: '/userInfo',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 10 spaces but found 20
  src\router\router.js:29:1
                      name: 'userInfo',
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 10 spaces but found 20
  src\router\router.js:30:1
                      component: UserInfo
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 8 spaces but found 16
  src\router\router.js:31:1
                  }
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 6 spaces but found 12
  src\router\router.js:32:1
              ]
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 4 spaces but found 8
  src\router\router.js:33:1
          }
   ^

  ✘✘  http://eslint.org/docs/rules/indent  Expected indentation of 2 spaces but found 4
  src\router\router.js:34:1
      ]
   ^


✘✘ 24 problems (24 errors, 0 warnings)


Errors:
  24  http://eslint.org/docs/rules/indent

第一種解決辦法:

第二種解決辦法:
註釋掉build裏面webpack.base.conf.js裏的el規範配置

或者

vue UI組件推薦http://www.javashuo.com/article/p-xzoqhyqe-dx.html