vue学习之使用vue-cil 脚手架工具的开发流程

前记：一个便签功能spa。使用vue-cli 搭配webpack打包工具开发的一个SPA小项目，对vue的进一步学习

技术栈：vue-cli vuex localstorage webpack

初始配置

前提安装好了node.js,webpack,git,vue

//vue脚手架工具安装
npm install vue-cli -g

//创建vue项目，这里会对初始项目进行一系列配置，按需使用
vue init webpack note-book

//进入项目以及安装项目依赖，此处建议使用npm install安装，因为使用cnpm后续可能会出现一些依赖包的问题
cd note-book
npm install
//进入开发模式
npm run dev

项目配置完成，在src这个文件夹下进行开发
assets文件夹下放置图片文件，components文件夹放置vue组件，app.vue是整个项目文件的入口，
main.js作项目的一些根引用（目前我是这么理解的）

开发过程中遇到的问题

兄弟组件之间的通信问题

header.vue中的一个按钮点击，要使得contents.vue组件div容器左移
由于只是单个组件变动，不应该使用vuex状态管理。
最后的解决办法是新建vue对象进行传值（$emit $on的方法），不知道这么理解对不对...

//在组件文件夹下新建一个index.js文件
import Vue from 'vue';

export default new Vue();//创建一个新vue实例，用于兄弟组件之间的通信
//header.vue
<span class="logo" @click="showConLeft">

methods: {
    showConLeft: function (){
      this.conFlag = !this.conFlag
      bus.$emit('myFun',this.conFlag) //触发事件，myfun 为自定义事件
    }
}

//contents.vue
created: function() {
            this.bbtn();
        },
        methods: {
            bbtn: function() {
                bus.$on('myFun',(message)=>{  //接收事件
                    this.conleft = message ? '0px' : '-25%';
                })
            }
        }

使用vuex进行数据状态管理

src 下创建一个vuex文件夹 => vuex/store.js

import Vue from 'vue'
import Vuex form 'vuex'

Vue.use(Vuex)
const state = {
    //状态
}

const mutations = {
    //方法
}

export default new Vuex.Store({
    state,
    mutaions
})
//目前还不是很懂actions是什么东西，所以此处没有使用到

需要注意的是，所有state里面的数据变化，都只能通过mutations里面的函数进行提交更改
方法：

this.$store.commit('changeItem')

项目发布

npm run build

这里发现，打包后文件的引用是绝对路径，在本地是无法预览的，进行更改：
找到build/config/index.js
修改

assetsPublicPath: './'

再次打包，显示正常，可是background-image无法显示，进行更改：
build/utils.js

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        //添加路径显示背景图片
        publicPath: '../../'
      })
    }

项目在线预览地址

demo

由于项目比较简单，页面也单一，没有使用vue-router

目前只是完成了基本功能骨架，可能会做后续开发。

vue-spa(notebook)开发流程