创建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写的一个自定义弹出式对话框代码
Jan 17 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
利用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版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Python功能键的读取方法
2015/05/28 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python中set()函数简介及实例解析
2018/01/09 Python
Django中的forms组件实例详解
2018/11/08 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
pytorch masked_fill报错的解决
2020/02/18 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
党员服务承诺书
2014/05/28 职场文书
售房协议书范本2014
2014/10/23 职场文书
内乡县衙导游词
2015/02/05 职场文书
活动费用申请报告
2015/05/15 职场文书
债务纠纷代理词
2015/05/25 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
详解CSS故障艺术
2021/05/25 HTML / CSS
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS