创建Vue项目以及引入Iview的方法示例


Posted in Javascript onDecember 03, 2018

创建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'
  ]
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
javascript求日期差的方法
Mar 02 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 #Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 #Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 #Javascript
从零开始实现Vue简单的Toast插件
Dec 03 #Javascript
使用NestJS开发Node.js应用的方法
Dec 03 #Javascript
写gulp遇到的ES6问题详解
Dec 03 #Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 #Javascript
You might like
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
js数组操作常用方法
2014/05/08 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
几个Linux面试题笔试题
2016/08/01 面试题
医院竞聘演讲稿
2014/05/16 职场文书
迎新生标语大全
2014/10/06 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python