【Vue+iView】根据iView提供的实例(iview-project-3.0)作为模板开始新项目 遇到的问题

#1)记录说明:

使用iview提供的脚手架、下载iview脚手架实例(iview-project-3.0)。

下载实例后,需要安装node,npm,webpack

#2)安装node.js

说明:如何检查Node.js是否安装正常

在命令提示符面板中,输入命令node -v

输入命令npm -v ,可查看当前npm的版本

#3)安装webpack

通过cmd进入项目根目录文件夹,输入:

npm install webpack --save-dev

npm install -g webpack-dev-server

#4)开始iview_project

使用iview提供的iview脚手架实例:

https://github.com/iview/iview-project

下载后,在含有package.json这个文件执行命令。

  • //安装依赖

npm install

  • //第一次执行的话需要额外执行,用来创建html

npm run init

#5)可能出现的问题及本人成功解决的方法:

Q1,vue组件库iView初始化npm run init 报错 iview TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

找到D:\iview\iview-admin-dev\build\webpack.dev.config.js 打开将这一行代码:

fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});

替换为

fs.write(fd, buf, 0, 'utf-8', function(err, written, buffer) {});

Q2,在该项目下不需要再安装webpack,可以通过查看该项目中的package.json,其中已经包含webpack等配置。

Q3,如果遇上

Error: Cannot find module 'webpack'   /   'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

等错误,可以删除NPM目录下的 webpack / webpack-cli / webpack-server 等目录然后重新解压iview实例项目,在其中重复 #4中的安装操作。

  • //然后运行

npm run dev

 

#6)说明:

里面的方法主要是转载了其他博主的内容,但是在实现他们的方法的过程中,我也遇到了一些当时没有查到的问题,记录下来以便以后查看。对在这里引用了内容的博主一并感谢。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先,在项目中引入iviewvue-resource: ``` import Vue from 'vue' import iView from 'iview' import 'iview/dist/styles/iview.css' import VueResource from 'vue-resource' Vue.use(iView) Vue.use(VueResource) ``` 2. 在vue文件中使用iview的Select组件实现省市选择: ``` <template> <div> <Select v-model="province" @on-change="getCityList"> <Option v-for="(item, index) in provinceList" :value="item.id" :key="index">{{ item.name }}</Option> </Select> <Select v-model="city"> <Option v-for="(item, index) in cityList" :value="item.id" :key="index">{{ item.name }}</Option> </Select> </div> </template> <script> export default { data () { return { province: '', city: '', provinceList: [], cityList: [] } }, mounted () { this.getProvinceList() }, methods: { // 获取省份列表 getProvinceList () { this.$http.get('/api/province').then(res => { this.provinceList = res.data }) }, // 获取城市列表 getCityList () { this.$http.get('/api/city', { params: { province: this.province } }).then(res => { this.cityList = res.data }) } } } </script> ``` 3. 在后台实现省市数据接口: 省份接口: ``` app.get('/api/province', function(req, res) { res.json([ {id: 1, name: '北京'}, {id: 2, name: '上海'}, {id: 3, name: '广东省'}, {id: 4, name: '湖南省'} ]) }) ``` 城市接口: ``` app.get('/api/city', function(req, res) { var provinceId = req.query.province var cityList = [] switch(provinceId) { case '1': cityList = [ {id: 101, name: '北京市'}, {id: 102, name: '海淀区'}, {id: 103, name: '朝阳区'}, {id: 104, name: '东城区'}, {id: 105, name: '西城区'} ] break case '2': cityList = [ {id: 201, name: '上海市'}, {id: 202, name: '浦东区'}, {id: 203, name: '徐汇区'}, {id: 204, name: '黄浦区'}, {id: 205, name: '静安区'} ] break case '3': cityList = [ {id: 301, name: '广州市'}, {id: 302, name: '深圳市'}, {id: 303, name: '珠海市'}, {id: 304, name: '佛山市'}, {id: 305, name: '东莞市'} ] break case '4': cityList = [ {id: 401, name: '长沙市'}, {id: 402, name: '株洲市'}, {id: 403, name: '湘潭市'}, {id: 404, name: '衡阳市'}, {id: 405, name: '邵阳市'} ] break default: break } res.json(cityList) }) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值