创建Vue项目 以及引入Iview作者：Anne、

Vue官方文档：

/

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法。

创建Vue项目过程

$ vue init webpack vue-iview? Project name vue-iview? Project description A Vue.js project? Author yourname <youremail@example.com>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "vue-iview". To get started: cd vue-iview npm install npm run dev Documentation can be found at 安装依赖

引入iview

src/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' // 使用 CSSVue.config.productionTip = falseVue.use(iView)/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})在main.js中添加了

import iView from 'iview'import 'iview/dist/styles/iview.css' // 使用 CSSVue.use(iView)iview 安装

$ cnpm install --save iview使用iview 组件

src/components/msg.vue

<template> <div> 查看消息 <input type="text"> </div></template><script>export default { name: 'Msg'}</script><style scoped></style>src/main.js

import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview'import axios from 'axios'import 'iview/dist/styles/iview.css'import 'iview/dist/iview.min.js'import { Button,Modal } from 'iview'Vue.component('Modal', Modal)Vue.config.productionTip = falseVue.use(iView)// 设置基础URLaxios.defaults.baseURL = ""urlencoded';Vue.prototype.$axios = axiosnew Vue({ el: '#app', router, components: { App }, template: '<App/>'})

打赏

微信扫一扫，打赏作者吧～