创建Vue项目 以及引入Iview
2017-12-01 13:35
573 查看
创建Vue项目 以及引入Iview
官方文档
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev12345678以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法。
我创建Vue项目过程
$ vue init webpack vue-iview1
? 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/webpack1234567891011121314151617181920
$ cd vue-iview/ $ cnpm install $ npm run dev123vue 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 } })123456789101112131415161718在main.js中添加了
import iView from 'iview' import 'iview/dist/styles/iview.css' // 使用 CSS Vue.use(iView)123以上3行代码
iview 安装
$ cnpm install --save iview1
使用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>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950src/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>
原文链接http://blog.csdn.net/seek_of/article/details/78387186
相关文章推荐
- 创建Vue项目 以及引入Iview
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
- 【vue】如何在 Vue-cli 创建的项目中引入iView
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
- Vue-cli创建vue项目以及配置文件梳理
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- 利用vue-cli创建新项目和引入Bootstrap的方法
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
- vue开发环境搭建以及项目创建
- vue-cli快速构建项目以及引入bootstrap、jq
- vue项目中引入外部css以及js文件的方法
- vue.js学习笔记之安装以及项目的创建和运行
- webpack+vue创建简单项目并整合iview
- eclipse构建maven项目,以及创建完成后pom文件报错
- vue cli搭建项目及文件引入
- vue-cli中如何创建并引入自定义组件
- 使用Intellij Idea创建Java Web项目以及运行配置
- 使用Maven创建Web项目后,jsp引入静态文件提示报错。JSP 报错:javax.servlet.ServletException cannot be resolved to a type
- vue项目中如何引入jquery