@Official documents @Reference blog1,@Reference blog 2
Final effect:
realization:
After the introduction of iView, an error is found, and the error information can be referred to @Reference blog 1, according to the blog Guide
cnpm uninstall vue-cli -g cnpm install -g @vue/cli
vue init webpack yanan
cnpm install vue
Then introduce iView
import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iView)
delete package.json In“ eslint:recommended ”(if present)
Launch project
cnpm run dev
At this point, you can access the relevant path of the project to achieve the above effect
Project key code:
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="Here is the interface address for uploading pictures"> <Button style="border-color:#53CAC3;color: #7F7F7F;" class="title-btn fourSize">Upload picture</Button> </Upload> <img :src="zynimg" /> </div> </template> <script> export default { name: 'HelloWorld', data () { return { zynimg: '' } }, methods: { successImg (response, file, fileList) { // Callback after uploading the picture successfully 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 It's generated by default. It's useless. It's not pasted
Considering that some apes may need the full code, it also uploaded
Among them, node_ The modules folder is too large. It is not very useful in this case. It was not uploaded