創建項目
vue-cli3創建項目有兩種方式,一種是通過命令行,一種是通過UI界面創建,在此我們使用命令行創建
- 在指定項目根目錄執行
vue create -n my-project
命令初始化項目,注意-n
選項,如果不帶-n
,初始化項目的時候,也進行git
初始化- 系統提示兩個選項進行選擇:一是默認安裝bable、eslint,二是自定義安裝,我選擇第二種
- 根據羅列出的幾個選項和提示,我只選擇安裝bable,注意:選擇選項的時候,按空格鍵是選擇和不選擇,按A鍵是全選,按I鍵是反選
- 系統提示怎麼設置配置文件,是單獨配置還是放在package.json文件裏,我選擇單獨配置
- 最後一步提示,是否將這次創建項目的操作保留,等待以後創建項目的時候使用,我選擇的是否
- 安裝完成,執行
npm run serve
命令,訪問http://localhost:8080/
引入 element
在項目根目錄執行
npm i element-ui -S
命令安裝
在項目入口文件main.js
引入element
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
寫一個小demo
<template>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6">
<el-row>
<el-button>賬號登錄</el-button>
<el-button>免密登錄</el-button>
</el-row>
<el-form label-width="80px" size="medium" class="login-form">
<el-form-item label="郵箱">
<el-input></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input></el-input>
</el-form-item>
<el-form-item label="驗證碼">
<el-input class="login-input"></el-input>
<div class="captcha" @click="getCaptcha">
<span class="captcha-content" v-html="captchaTpl"></span>
</div>
</el-form-item>
</el-form>
<el-row>
<el-button type="primary">提交</el-button>
<el-button type="warning">重置</el-button>
</el-row>
</el-col>
</el-row>
</template>
<script>
import createCaptcha from './../utils/createCaptcha';
export default {
data() {
return {
captchaTpl:'',
originCaptcha:'',
}
},
methods: {
getCaptcha() {
const captcha = createCaptcha();
this.captchaTpl = captcha.tpl;
this.originCaptcha = captcha.captcha;
}
},
beforeMount() {
this.getCaptcha();
}
}
</script>
<style>
.login-form{
margin-top: 20px;
}
.row-bg{
margin: 200px auto;
}
.login-input{
width:50%;
}
.captcha{
cursor: pointer;
width:50%;
display: inline-block;
background:#b73636;
border-radius: 5px;
}
.captcha-content{
font-size: 20px;
color:white;
display:inline-flex;
}
.captcha-content span{
width:20px;
}
.login-btn{
width:50%;
height: 30px;
line-height: 30px;
border:1px solid #409EFF;
}
</style>
結果展示
不是專業前端,寫的有點醜,只是假裝會寫前端,哈哈