vuejs webapp框架_一个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

构建框架

踩坑——本地图片请求问题

问题描述：项目中有列表项，但是数据都是固定的，于是需要自己建立一个本地的数据表，于是问题出现了,当我写成这样的时候，图片是好的完整展示


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


data () {

return {

hexun: "../img/homepage/hexun.png"

}

},

经研究后发现本地的图片在编译的过程中路径会发生变化，不是原来写的，所以需要这样写

imageSrc: require('../../static/img/Internet.png'),

可是需求时一系列的图片路径，亲测放在数组中是不好使的

报错：

最终方案：把图片放在最外面的static文件下，然后在文件中引用如下：


总结：放在模版里是会被 webpack 打包出来 所以可以而在 js 里写图片路径其实只是字符串 webpack 不会处理如果想这么做 你可以把图片放在最外层的 static 文件夹或使用 import require 引入

踩坑——列表项li响应问题

问题描述：项目中的列表用v-for渲染，给li绑定事件之后，触发其中一个项，其他都会响应，样式如下：

点击前

点击后

解决方案：数组中添加一个标识，sel = false

html

{{ item.describe }}

js

methods: {

show: function (event, index) {

this.items[index].sel = true

},

unshow: function (event, index) {

this.items[index].sel = false

}

}