創建Vue項目以及引入Iview的方法示例

這篇文章主要介紹了創建Vue項目以及引入Iview的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

創建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 <[email protected]>
? 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'
  ]
 }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。