作者:蟹子的宿命 | 来源:互联网 | 2023-08-18 08:47
1.vue是基于MVVM模式的框架,即通过数据来操作DOM结构,最为突出的特点就是双向数据绑定的特点;如下图所示是vue-cli搭的脚手架项目文件的构成2.主要代码的编写是src文件,一般来说
1.vue是基于MVVM模式的框架,即通过数据来操作DOM结构,最为突出的特点就是双向数据绑定的特点;如下图所示是vue-cli搭的脚手架项目文件的构成
'#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="/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>
编写html文件,
编写文件,
样式文件;
**在项目中一般使用预编译性的语言如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
在
@import ‘./less/my.less’;
vue商城的项目构造基本搭建好了,这样就可以进行开发了!