创建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? Yesvue-cli · Generated "vue-iview".To get started:cd vue-iviewnpm installnpm run devDocumentation 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 = 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相关推荐

创建vue项目(二)引入elementUi、axios、准备静态资源、封装组件（.vue，js代码等）
下载安装node -> vue-cli -> 配置路由 -> 引入elementUi -> 公共组件一.引入elementUi 顺便一提axios使用说明和axios在vu ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
vue的使用（引用/创建vue项目）（一）
在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了开发步骤,使用广 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
前端-可视化创建vue项目
注:以下操作是在已安装脚手架的基础上进行(如果出现可视化创建vue项目失败的情况,可能是脚手架版本的问题,建议安装更高版本的脚手架) 一.打开可视化界面第一步,视窗键+R,打开"运行&qu ...
IDE创建vue项目
IDE创建vue项目 vue与vue cli的关系 vue.js是一个框架,核心是数据绑定,可以用于老的项目,引入vue.js即可使用 Vue3文档 - vuejs:vue官网 vue cli:vue ...

创建Vue项目以及引入Iview

创建Vue项目以及引入Iview

官方文档

我创建Vue项目过程

引入iview

iview 安装

使用iview 组件

创建Vue项目以及引入Iview相关推荐

最新文章

热门文章

创建Vue项目 以及引入Iview

创建Vue项目 以及引入Iview

官方文档

我创建Vue项目过程

引入iview

iview 安装

使用iview 组件

创建Vue项目 以及引入Iview相关推荐

最新文章

热门文章

创建Vue项目以及引入Iview

创建Vue项目以及引入Iview

创建Vue项目以及引入Iview相关推荐