創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

$ 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

// 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 }
})

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>
<script>
export default {
 data () {
  return {
   formInline: {
    user: '',
    password: ''
   },
   ruleInline: {
    user: [
     { required: true, message: '請?zhí)顚懹脩裘?, trigger: 'blur' }
    ],
    password: [
     { required: true, message: '請?zhí)顚懨艽a', 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('表單驗(yàn)證失敗!')
    }
   })
  }
 }
}
</script>

<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>

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