创建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 相关文章推荐
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php实现的通用图片处理类
2015/03/24 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python实现公司年会抽奖程序
2019/01/22 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
python datetime处理时间小结
2020/04/16 Python
Python with语句用法原理详解
2020/07/03 Python
《三亚落日》教学反思
2014/04/26 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
小区文明倡议书
2014/05/16 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
教师旷工检讨书
2015/08/15 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python