vue入门

1 . 首先全局装vue-cli，它是vue的一个脚手架。

cnpm i -g vue-cli

2 . 然后进入workspace。执行了如下代码，生成vue项目的初始化工作。这里是基于webpack打包。

vue init webpack learnvue

3 . 引导定制过程中，测试的选项我全部选了否，完了之后，根据提示，进入learnvue。执行 了

cnpm i

4 . ok，一切顺利。然后，执行

cnpm run dev

5 . ok，打开浏览器跑起来了，正常。

然而

6 . 解决scanning files to index

打开常用的webstorm 10.打开这个learnvue。看到了 scanning files to index。意思是正在扫描文件索引。听起来是项目文件读取的问题。怎么可能要扫描这么长时间。没有大文件呀？于是我放弃这次vue init出来的文件。决定删除它。就在我删除文件的时候，window提示我文件目录结构太深，无法删除。这让我想到了什么，那就是scanning files to index也是这个原因。唯一的就是node_modules。解决 scanning files to index的办法就是在这个node_module文件上右键。mark Directory As > Excluded。 
重新打开项目。ok!

7 . webtorｍ的两个vue插件都装了。(vue-for-idea和vue.js)

8 . 解决es 6

当我想愉快地尝试vue的时候，发现script里的代码给我标红了，说我语法错误了。于是在language &&fraｍework里 解决es 6的问题。并且在vue的script里用type=”text/babel”或者type=”text/ecmascipt-6”什么的，还是描红报错。

9 . 升级webstorm。

下载了webstorm 2016的安装包。下了一个破解jar包。（如果有需要的请到qq群454796847里下载或者进群问少侠要）。顺利把webstorm升级到 2016，而且可以导入以前webstorm的配置。完全不会影响体验。真棒。es6也认识了。

10 . sass

一切看上去很正常。可是楼主是一个爱折腾的人。觉得把style写在vue里感觉别扭。个人看法，觉得有必要把样式文件拎出来。但也不拎得太远。所以放在components下的vue组件会是这样一个结构

comonents 
–hello//组件名字 
—-hello.sass //这个组件的样式 
—-hello.vue //这个组件的本身

为了解析sass文件，webpack.base.conf.js里需要加一个处理sass文件的loder。不多讲。 
下面我把hello.vue的代码贴出来，注意script和style标签的属性。

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

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!fkdlsaj;'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
 @import "hello.sass";
</style>

hello.sass

h1
  color: #690
  font-size: 2rem

11 . 最后留下一个题目：

因为把组件写在文件夹下了，所以在用组件时就会这样

import Hello from './components/Hello/hello'

这么长，不爽吧，可以试着组件文件夹里加一个index.js。或者把这些组件全部在webpack.base.conf.js中取个别名。建议用后者。