最终效果:
实现:
引入iView后发现报错,报错信息可参考@参考博客1的图片,根据博文指引
cnpm uninstall vue-cli -g cnpm install -g @vue/cli
vue init webpack yanan
cnpm install vue
然后引入iView
import iView from ‘iview‘
import ‘iview/dist/styles/iview.css‘
Vue.use(iView)
删除package.json中的“eslint:recommended”(如果存在)
启动项目
cnpm run dev
至此,访问项目相关路径即可实现上述效果
项目关键代码:
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import iView from ‘iview‘ import ‘iview/dist/styles/iview.css‘ Vue.config.productionTip = false Vue.use(iView) /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, components: { App }, template: ‘<App/>‘ })
App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> export default { name: ‘App‘ } </script> <style> #app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
router/index.js
import Vue from ‘vue‘ import Router from ‘vue-router‘ import HelloWorld from ‘@/components/HelloWorld‘ import zyn from ‘@/components/zyn‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/‘, name: ‘HelloWorld‘, component: HelloWorld }, { path: ‘/zyn‘, name: ‘zyn‘, component: zyn } ] })
zyn.vue
<template> <div class="hello3"> <Upload name="image" :on-success="successImg" action="此处是上传图片接口地址"> <Button style="border-color:#53CAC3;color: #7F7F7F;" class="title-btn fourSize">上传图片</Button> </Upload> <img :src="zynimg" /> </div> </template> <script> export default { name: ‘HelloWorld‘, data () { return { zynimg: ‘‘ } }, methods: { successImg (response, file, fileList) { // 上传图片成功后回调 console.log(response) if (response.code === 1) { this.zynimg = response.data.imgUrl } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
Helloworld.vue是默认生成的,没什么用,不贴了
考虑到一部分猿可能需要完整代码,因此也上传了
其中node_modules文件夹太大,本案例中也没多大作用,没上传