溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
創建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 <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
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'
]
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
