創(chuàng)建Vue項目以及引入Iview的方法示例
創(chuàng)建Vue項目 以及引入Iview
# 全局安裝 vue-cli $ npm install --global vue-cli # 創(chuàng)建一個基于 webpack 模板的新項目 $ vue init webpack my-project # 安裝依賴,走你 $ cd my-project $ npm install $ npm run dev
以上是vue官方文檔中Vue.js 提供一個 官方命令行工具 創(chuàng)建vue項目的方法。
我創(chuàng)建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 時我使用默認(rèn)的選項,直接回車;這里使用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 組件
創(chuàng)建 src/components/LoginForm.vue
官方的組件代碼縮進(jìn)不符合要求,需要修改
<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('表單驗證失敗!') } }) } } } </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>
補(bǔ)充: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' ] }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中import from的來源及省略后綴與加載文件夾問題
這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05vue-cli?npm如何解決vue項目中缺失core-js的問題
這篇文章主要介紹了vue-cli?npm如何解決vue項目中缺失core-js的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08VUE+node(express)實現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node(express)前后端分離實例內(nèi)容,有需要的朋友們參考下。2019-10-10