创建Vue项目以及引入Iview的方法示例
作者:Seek_Of 时间:2024-05-28 16:04:05
创建Vue项目 以及引入Iview
官方文档
# 全局安装 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 https://vuejs-templates.github.io/webpack
$ cd vue-iview/
$ cnpm install
$ npm run dev
vue init webpack vue-iview 时我使用默认的选项,直接回车;这里使用cnpm 安装依赖
引入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' // 使用 CSS
Vue.config.productionTip = false
Vue.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' // 使用 CSS
Vue.use(iView)
以上3行代码
iview 安装
$ cnpm install --save iview
使用iview 组件
创建 src/components/LoginForm.vue
官方的组件代码缩进不符合要求,需要修改
<template>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="user">
<Input type="text" v-model="formInline.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" placeholder="Password">
<Icon type="ios-locked-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">登录</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
formInline: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: '请填写用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请填写密码', trigger: 'blur' },
{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('提交成功!')
} else {
this.$Message.error('表单验证失败!')
}
})
}
}
}
</script>
src/App.vue:
<template>
<div id="app">
<LoginForm></LoginForm>
</div>
</template>
<script>
import LoginForm from './components/LoginForm'
export default {
name: 'app',
components: {
'LoginForm': LoginForm
}
}
</script>
<style>
#app {
}
</style>
补充:vue安装完iview后,启动项目,提示 in ./node_modules/dist/styles/iview.css 报错
打开 webpack.base.conf.js,找到 test:/.css$/,添加includ项即可
{
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader',
include:[
/src/,
'/node_modules/iview/dist/styles/iview.css'
]
}
来源:https://blog.csdn.net/seek_of/article/details/78387186
标签:Vue,Iview
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
MySQL索引结构详细解析
2024-01-13 19:20:06
![](https://img.aspxhome.com/file/2023/1/85811_0s.png)
python数据结构之二叉树的统计与转换实例
2023-08-11 07:35:48
![](https://img.aspxhome.com/file/2023/2/61712_0s.jpg)
利用Python实现获取照片位置信息
2022-12-07 06:58:16
![](https://img.aspxhome.com/file/2023/1/134641_0s.png)
关于Python函数参数的进阶用法
2023-10-06 12:03:41
TensorFlow 合并/连接数组的方法
2021-08-19 16:28:35
Python实现批量读取word中表格信息的方法
2023-03-25 19:02:05
Python抓取手机号归属地信息示例代码
2023-03-02 21:24:59
Tortoise-orm信号实现及使用场景源码详解
2021-12-18 23:01:45
关于Java中使用jdbc连接数据库中文出现乱码的问题
2024-01-28 14:57:24
![](https://img.aspxhome.com/file/2023/2/86792_0s.png)
Python pandas RFM模型应用实例详解
2023-10-15 23:27:34
![](https://img.aspxhome.com/file/2023/7/76977_0s.png)
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2022-10-06 20:08:56
python实现飞机大战(面向过程)
2022-04-18 10:44:17
![](https://img.aspxhome.com/file/2023/0/97110_0s.jpg)
mysql 表索引的一些要点
2024-01-24 04:06:51
正确认识MySQL对服务器端光标的限制
2008-12-03 15:52:00
Python get获取页面cookie代码实例
2021-03-29 17:26:49
Javascript 中对中文长度对行判断
2009-07-05 18:39:00
PyTorch 对应点相乘、矩阵相乘实例
2021-10-23 16:33:29
SQL 判断给定日期值(或时间段)所在星期的星期一和星期天的日期
2011-10-24 20:14:52
pandas数据处理之绘图的实现
2022-11-14 06:22:39
![](https://img.aspxhome.com/file/2023/6/133776_0s.png)
用javascript实现的支持lrc歌词的播放器
2024-04-10 14:03:33