vueJs入门实践遇到的坑和一些想法

版权声明:本文为博主原创文章,未经博主允许不得转载,如对博文有疑虑请入群454796847交流。 https://blog.csdn.net/keliyxyz/article/details/51400814

一个不错的开头

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 . webtorm的两个vue插件都装了。(vue-for-idea和vue.js)

8 . 解决es 6

当我想愉快地尝试vue的时候,发现script里的代码给我标红了,说我语法错误了。于是在language &&framework里 解决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中取个别名。建议用后者。

阅读更多
换一批

没有更多推荐了,返回首页