用vue-cli 与vuex一步一步搭建一个笔记应用(一)

写这篇文章是因为想学习一下vuex，说实话，一直在用vue，但是它核心的vuex却还没有用过。
https://segmentfault.com/a/1190000005015164
这篇文章写得很好，就是有点旧了，那个时候是1年前写的吧。

现在我将用vue-cli自动化构建工程，然后搭配vuex来搭建一个笔记应用。

第一步 vue-cli

vue-cli安装非常简单，它为我们节省了很多webpack配置文件。

vue-cli的使用请查看[文档][https://github.com/vuejs/vue-cli]

# 安装 vue-cli
npm install -g vue-cli

# 初始化 webpack 项目
vue init webpack my-project
cd my-project
# npm可能出现访问速度极慢的情况，推荐使用cnpm
npm install
#安装 vux 发版请使用 npm install vux@next
npm install vux
#安装less-loader, vuejs-templates模板默认不安装less less-loader
npm install less less-loader --save-dev
# 调试
npm run dev

这是我们的安装日志：

后面询问了是否用vue-router 我选择了no，因为这里应该用不到vue-router吧（如果要用，我们后面再安装吧）

看一下生成的目录文件:

• build文件夹是npm run build之后构建的build文件，以及一些配置文件，
• config文件夹放的是一些配置文件。
• static故名思义是静态文件。
• index.html是主页面，当然这里面只有一个div节点名为app。
• 最重要的是src文件夹:
  
  • 这里面的几个文件夹assets 存放静态文件，比如图片等，说明一下，vue一般是把css写在每个vue中的
  • components是组件，一个页面可以理解为由很多很多的组件组成的。
  • app.vue就是主要的页面，可以理解为把这些组件组合起来的文件。
  • main.js其实是用于组合app.vue 和index.html

ok 我们npm run dev来看看。

哦呜这里报错了。
看日志说是Error: Cannot find module ‘wrappy’找不到wrappy模块。
我这里再单独下载wrappy: cnpm install -g wrappy 也无法解决。

tipS：遇到这种问题，干脆直接把node_modules文件夹删了吧，然后重新npm install。有时候文件放久了之后也会有这个问题。反正重新npm install就好了。

接着重新npm run dev，可以看到程序已经运行起来了。

默认是8080端口，如果你的8080端口被占用了，也会报错，当然这个端口号也可以自己去配置的，这里就不说了。

这里显示的页面其实就是components/Hello.vue ，可以自己改Hello.vue来看看，这里也不写了，而且这里自动构建的是热加载（即你一修改完，页面就会相应的显示，不需要再npm run dev）。下面就开始构建笔记应用了。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>