创建Vue项目以及引入Iview的方法示例

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

$ vue init webpack vue-iview

? Project name vue-iview
? Project de ion 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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack. .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 }
})

import iView from \'iview\'
import \'iview/dist/styles/iview.css\'  // 使用 CSS
Vue.use(iView)

$ cnpm install --save iview

<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>
< >
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(\'表单验证失败!\')
    }
   })
  }
 }
}
</ >

<template>
 <div id=\"app\">
  <LoginForm></LoginForm>
 </div>
</template>

< >
import LoginForm from \'./components/LoginForm\'
export default {
 name: \'app\',
 components: {
  \'LoginForm\': LoginForm
 }
}
</ >

<style>
#app {

}
</style>

{
  test:/\\.css$/,
  loader:\'style-loader!css-loader!stylus-loader\',
  include:[
   /src/,
   \'/node_modules/iview/dist/styles/iview.css\'
  ]
 }