创建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 19 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JavaScript 基本概念
Jan 20 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
javascript实现智能手环时间显示
Sep 18 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函数,php爱好者站推荐
2007/03/19 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
重定向实现代码
2006/11/20 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
详解vue axios二次封装
2018/07/22 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
python多线程用法实例详解
2015/01/15 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
学院领导推荐信
2013/10/30 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
政府采购方案
2014/06/12 职场文书
基层党组织整改方案
2014/10/25 职场文书
廉政承诺书2015
2015/04/28 职场文书
汉字听写大会观后感
2015/06/12 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android