一、前期准备
1、安装node.js(npm同步安装)
2、vue init webpack：安装vue-cli脚手架
3、npm install vuex --save：安装vuex，注意是--save，不是--save-dev
4、npm install axios vue-axios --save：安装axios
5、建好目录结构：
assets：静态资源文件
components：组件
lib：第三方库、模拟数据
router：路由配置文件
store：vuex文件
views：所有的单页面文件
6、在main.js引入样式文件，路径使用相对路径，
如：import app from './assets/css/app.css'
组件使用绝对路径
如：import HelloWorld from '@/components/HelloWorld'
二、数据导入
主要用到v-for="(item,index) in dataList"
注意：
export default dataList是将数据模块暴露 //使用的是export
要引入数据，使用import goodsData from '@/lib/newGoodsData' //使用的是import
goodsData是数据模块暴露的变量，即数据的变量名，import引入路径是数据js文件所在的路径
绑定数据的写法：
<img :src="'http://img01.smartisanos.cn/'+sku.spec_json.image+'20X20.jpg'">;
固定路径前后用''括起来，总的src值外面用""括起来，vue变量不用引号
插值：{{number}}，前面不用加:，不是动态绑定
如果是动态绑定，用:，不需要加{{}}
举例：<p>{{number}}</p> <img :src="imgSrc alt="">
template里面的data里面的变量使用的时候，前面不加this.，在构造器里面才使用this.来获取
<a href="javascript:;" :class="{active:itemIndex===index}">
三、
零碎知识点总结：
1、template的模板可以是li之类的一部分，不一定必须是div
©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任
随时随地看视频
