写这篇文章是因为想学习一下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>
Logo

前往低代码交流专区

更多推荐