1.前人栽树，后人乘凉：
如果每个组件都要自己亲自去开发，那工作量将会巨大，我们可以直接使用别人开发好的组件，加快开发效率。
iView文档参考：
https://www.iviewui.com/docs/guide/install
2.直接引入使用（不建议）:
如果
iView
里面的插件能
完全
满足你项目需求，可以使用该方法。案例：
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iview example</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<i-button @click="show">Click me!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
</body>
</html>
|
3.完整开发项目流程（建议）：
如果一旦
iView
里面的组件不能满足项目需求，或者将来有可能不满足，则建议使用完整项目开发流程。
首先切换到将要安装vue项目的目录，例如：D:\myvue
1).全局安装vue-cli:
| cnpm install -g vue-cli |
2).创建一个基于 webpack 模板的新项目
my-project:
| vue init webpack my-project |
3).进入项目:
| cd my-project |
4).安装
iView 框架：
|
cnpm install
iview
--save
|
5).安装依赖:
| npm install |
6).启动项目:
| npm run dev |
| http://localhost:8080/ |
| npm run build |
|
ln -s ../../../dist/index.html index.php
|
9).引入 iView：
①. 完整引入：
在
main.js 中写入以下内容：
|
import Vue from 'vue'
import App from './App.vue'
import
iView
from '
iview
';
import 'iview/dist/styles/iview.css';
//
样式文件需要单独引入
Vue.use(
iView
)
new Vue({
el: '#app',
render: h => h(
App
)
});
|
注意：样式文件需要单独引入。
②.按需引入：
a.首先安装插件：
|
npm install
babel-plugin-import
--save-dev
|
b.修改
.babelrc 文件：
|
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
|
c.引入需要的组件：
|
import Vue from 'vue'
import App from './App.vue'
import {
Button, Table
} from '
iview
';
Vue.use(
Button
)
Vue.use(
Table
)
new Vue({
el: '#app',
render: h => h(
App
)
});
|
注：我们建议按需引入组件，这样项目体积最小；但是前期学习，我们可以使用完整引入。
4. 案例：
请先安装 npm，然后将附件项目拷贝到某个目录，然后解压，例如：
D:\myvue\ ,进入项目目录，执行如下操作：
|
npm install
npm run dev
npm run build
//项目开发完之后执行
|
扫一扫
932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
