拼团不中返利商城系统开发找广州许生
-
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 */
//17340689890 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)
})12345678910111213141516171819202122232425262728
2.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>12345678910111213141516171819202122232425262728
3.组件内代码的编写
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>12345678910111213141516171819202122232425262728293031323334353637383940414243
<template></template>
编写html文件,
<script></script>
编写文件,
<style></style>
样式文件;
**在项目中一般使用预编译性的语言如less/sass,因此需要配置预编译性文件所需要的运行环境,我使用的是webstrom编辑器
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69984164/viewspace-2744752/,如需转载,请注明出处,否则将追究法律责任。