创建Vue项目 以及引入Iview
来源:互联网 发布:nginx根据不同url跳转 编辑:程序博客网 时间:2024/06/03 21:14
创建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' // 使用 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)
以上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>
阅读全文
3 0
- 创建Vue项目 以及引入Iview
- 创建Vue项目 以及引入Iview
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- webpack+vue创建简单项目并整合iview
- vue-cli快速构建项目以及引入bootstrap、jq
- Vue.js安装以及创建项目
- vue开发环境搭建以及项目创建
- 浅谈Vue的iView
- MVC+vue.js+iview
- vue+iview写个弹框
- Vue-cli创建vue项目以及配置文件梳理
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
- vue项目中引入外部css以及js文件的方法
- 创建vue项目
- 创建vue项目
- vue.js创建项目
- 创建Vue.js 项目
- vue 创建项目
- javascript的toString深入探究
- js中区分对象和数组
- 整数中1出现的次数(从1到n整数中1出现的次数)
- C语言的学习机技巧
- 日语学习记录1
- 创建Vue项目 以及引入Iview
- 作业四 链队列
- office 2016优化
- 495. Teemo Attacking
- 视频编解码质量评价---BDBR与BD-PSNR
- 归并排序
- 开始学算法1
- concurrent-7-AQS-CountDownLatch,CyclicBarrier
- C语言:探测 unsigned int 的边界