项目初始化
//全局安装 vue-cli
$ npm install --global vue-cli
//创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
//安装依赖，走你
$ cd my-project(项目名)
$ npm install
$ npm run dev
some Tips
引入外部CSS: @import "../css/base.css";
引入外部Js: hu
构建框架
踩坑——本地图片请求问题
问题描述：项目中有列表项，但是数据都是固定的，于是需要自己建立一个本地的数据表，于是问题出现了,当我写成这样的时候，图片是好的完整展示
<li v-for="item in items" ">
<div v-show="willShow" class="cover_bg"></div>
<a class="w h oH" href="#"></a>
</li>
但是当我换成变量就废掉了，
<li v-for="item in items" ">
<div v-show="willShow" class="cover_bg"></div>
<a class="w h oH" href="#"></a>
</li>
data () {
return {
hexun: "../img/homepage/hexun.png"
}
},
经研究后发现本地的图片在编译的过程中路径会发生变化，不是原来写的，所以需要这样写
imageSrc: require('../../static/img/Internet.png'),
可是需求时一系列的图片路径，亲测放在数组中是不好使的
报错：
最终方案：把图片放在最外面的static文件下，然后在文件中引用如下：
<li v-for="item in items" >
<div v-show="willShow" class="cover_bg"></div>
<a class="w h oH" href="#"></a>
</li>
总结：放在模版里是会被 webpack 打包出来 所以可以而在 js 里写图片路径其实只是字符串 webpack 不会处理如果想这么做 你可以把图片放在最外层的 static 文件夹或使用 import require 引入
踩坑——列表项li响应问题
问题描述：项目中的列表用v-for渲染，给li绑定事件之后，触发其中一个项，其他都会响应，样式如下：
点击前
点击后
解决方案：数组中添加一个标识，
sel = false
html
<p v-if="item.sel" class="j_p f18">
{{ item.describe }}
</p>
js
methods: {
show: function (event, index) {
this.items[index].sel = true
},
unshow: function (event, index) {
this.items[index].sel = false
}
}
