vue 开发微商城-项目的构造-1

1.vue是基于MVVM模式的框架，即通过数据来操作DOM结构，最为突出的特点就是双向数据绑定的特点；如下图所示是vue-cli搭的脚手架项目文件的构成

2.主要代码的编写是src文件，一般来说一个大项目的文件结构如下图所示：

这样的项目结构有利于项目的开发和后期的维护。
3.main.js 项目的基本配置以及挂载

//引入项目所需要的基础组件
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import VueLazyload from 'vue-lazyload'
import store from './store'
//引入所需要的公共的样式
import 'common/stylus/index.styl'

/* eslint-disable no-unused-vars */
// import vConsole from 'vconsole'

fastclick.attach(document.body)

Vue.use(VueLazyload, {
  loading: require('common/image/default.png')
})

//初始化vue，el-挂载的元素;router-路由;store-VueX组件间传值和数据的本地化存储
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

<