一个webAPP项目的完整记录(vue)

项目初始化

//全局安装 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="#">![](../img/homepage/hexun.png)</a>
 </li>

但是当我换成变量就废掉了，

<li v-for="item in items" ">
    <div v-show="willShow" class="cover_bg"></div>
    <a class="w h oH" href="#">![](hexun)</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="#">![]('../../../static/img/'+ item.url)</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
    }
  }