创建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 <[e-mail]>
? 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'
  ]
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。