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)
})

4.App.vue入口页面的

<template>
<div id="app" @touchmove.prevent>
//头部文件
<m-header></m-header>
<tab></tab> //导航栏
<keep-alive>
<router-view></router-view> //
</keep-alive>
<player></player>
</div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header'
import Player from 'components/player/player'
import Tab from 'components/tab/tab'

export default {
components: {
MHeader,
Tab,
Player
}
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>

5.组件内代码的编写

vue是组件化的管理，一个组件的页面结构：

<template>
<footer class="footer">
<ul class=" ui-rows ui-rows-bottom footer-menu">
<!-- <li class="ui-cols">
<router-link to="/memberStore">
<i class="iconfont icon-huiyuantuijian">
</i>
<div>优选推荐</div>
</router-link>
</li>-->
<li class="ui-cols">
<router-link to="/more">
<i class="iconfont icon-gengduoshangpin">
</i>
<div>更多商品</div>
</router-link>
</li>
<li class="ui-cols" ref="shopcart">
<router-link to="/cart">
<i class="iconfont icon-gouwuche">
</i>
<div>购物车</div>
</router-link>
</li>
<li class="ui-cols">
<router-link to="/my">
<i class="iconfont icon-wode">
</i>
<div>我的</div>
</router-link>
</li>
</ul>
</footer>
</template>

<script type = "text/ecmascript-6">

</script>

<style lang='less' rel="stylesheet/less">
@import "./less/footer.less";
</style>

<template></template>

编写html文件，

<script></script>

编写文件，

<style></style>

样式文件；

**在项目中一般使用预编译性的语言如less/sass,因此需要配置预编译性文件所需要的运行环境，我使用的是webstrom编辑器，

1)首先运行命令提示符

npm install less

,默认安装目录在用户名\node_modules这里面。

2)配置webstorm,打开文件-设置-工具-File Watchers,如下图所示



3)progress设置的是lessc的路径，这里的目录可以参考截图中红框中的目录，他会默认编译到根目录。例如：

/Users/xx/node_modules/less/bin/lessc

4)如果你想要压缩编译后的css,除了在Arguments里写入–plugin=less-plugin-clean-css还需要安装压缩插件sudo npm install -g less-plugin-clean-css，如果最后less-plugin-clean-css的路径和上边的/Users/xx/node_modules/less不一个路径的话也跑步起来，这样怎么解决呢，可以直接将clean-css路径中的less-plugin-clean-css文件夹copy到/Users/xx/node_modules/中搞定



less网址http://less.bootcss.com/，也可以使用sass预编译处理；

另外在vue项目中也需要添加less的配置，打开如图所示的文件package.json



npm install less less-loader

在

<style></style>

@import ‘./less/my.less’;

vue商城的项目构造基本搭建好了，这样就可以进行开发了！