基于vue-cli、elementUI的Vue超簡單入門小例子（推薦）
這個例子還是比較簡單的，獨立完成后，能大概知道vue是干嘛的，可以寫個todoList的小例子。
開始寫例子之前，先對環(huán)境的部署做點簡單的介紹，其實和Vue官方的差不多。
#如若沒有安裝過vue-cli,先全局安裝一下vue-cli
$ cnpm i -g vue-cli
#到自己喜歡的目錄下創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
#
#
#之后會有如下詢問
? Project name (my-project) #回車
? Project description #回車，也可以寫點項目描述
? Author #回車，或者輸入作者
? Vue build standalone #回車
? Install vue-router? (Y/n) #這里是官方推薦的路由，果斷yes
? Use ESLint to lint your code? #No
? Set up unit tests #No
? Setup e2e tests with Nightwatch? #No
? Should we run `npm install` for you after the project has been created? (recommended)
> Yes, use NPM #可以按上下方向鍵選擇，這里我選第一個NPM，按回車確認
Yes, use Yarn
No, I will handle that myself
#等待完成
完成后可能會有警告，沒事，不是ERR就好
$ cd my-project #進入剛新建的文件夾
$ cnpm install #這里用的是淘寶的NPM鏡像,不懂可以自行搜索cnpm
$ npm run dev
###I Your application is running here: http://localhost:8080
**確保端口沒被占用，打開localhost:8080 see see **
打開我們的項目可見如下：
| 名稱 | 說明 |
|---|---|
| build | 項目構(gòu)建的一些代碼 |
| config | 開發(fā)環(huán)境的配置 |
| node_modules | 一些依賴包 |
| src | 源碼，我們就在這個文件夾內(nèi)寫代碼 |
| static | 靜態(tài)文件 |
| .babelrc | ES6編譯的一些配置 |
| .editorconfig | 代碼風(fēng)格配置文件 |
| .gitignore | git上傳時忽略的一些文件，比如node_modules這個文 |
| .postcssrc.js | 聽說是轉(zhuǎn)換CSS樣式的 |
| index.html | 入口頁面 |
| package-lock.json | 聽說是更詳細的package.json |
| package.json | 項目信息，項目名稱，開發(fā)的依賴的記錄等，一個JSON文件 |
現(xiàn)在打開src\componnets\HelloWorld.vue 把大部分代碼刪除，剩余如下：
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default { //ES6語法，用于輸出到外部，這樣就可以在其他文件內(nèi)用import輸入
name: 'HelloWorld',
data () { //由于是組件，data必須是個函數(shù)，這是ES6寫法，data后面加括號相當于data: function () {}
return { //記得return不然接收不到數(shù)據(jù)
msg: 'Welcome' //上面的 msg 就是這里輸出的
}
}
}
</script>
<style>
h1 {
font-weight: normal;
}
a {
color: #42b983;
}
</style>
到這里用了點ES6語法，如果對export和import不了解的，建議看看相關(guān)的介紹，暫時不想看也可以照著敲代碼。不過建議還是看看，只需10分鐘了解下export和import就好—— 阮一峰ECMAScript 6 入門
可以看到，之前打開的頁面變了樣：
####現(xiàn)在我們來安裝一下element-ui（關(guān)于element-ui詳細情況請自行搜索）
- 可以按照官方方法使用npm i element-ui -S命令進行安裝
- 也可以在package.json中添加，后通過cnpm install進行安裝
選擇2，打開package.json，找到devDependencies并在最后加上"element-ui": “^2.2.1”
"devDependencies": {
...
...
"element-ui": "^2.2.1"
打開命令行停止服務(wù)，再通過cnpm install進行安裝，安裝完成后npm run dev啟動
打開main.js在里面添加三行內(nèi)容
import ElementUI from 'element-ui' //新添加
import 'element-ui/lib/theme-chalk/index.css' //新添加，避免后期打包樣式不同，要放在import App from './App';之前
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.use(ElementUI) //新添加
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
添加了這三行，我們就可以使用element-ui了
接下來在components文件夾內(nèi)新建一個NewContact.vue 文件，添加如下代碼
<template> <el-row> <el-button type="success">1</el-button> </el-row> </template> <script> </script> <style> </style>
打開之前的HelloWorld.vue對內(nèi)容進行修改（router是官方路由插件，router-link to是router的語法）：
<template>
<!-- 這里router-link to="newcontact"會把路由導(dǎo)航到http://localhost:8080/#/newcontact -->
<router-link to="newcontact"><h1>{{ msg }}</h1></router-link>
</template>
打開router/index.js，添加新路由（router是官方路由插件，深入學(xué)習(xí)請查看文檔）
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewContact from '@/components/NewContact'//新添加，之后在下方的component: NewContact才會生效
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/newcontact',//和router-link to相呼應(yīng)，導(dǎo)航到/newcontact
name: 'NewContact',
component: NewContact
}
]
})
保存后打開頁面可以看到如下：
之前的welcome變成了可點擊的鏈接，點擊后跳轉(zhuǎn)看到如下頁面
至此，已經(jīng)我們已經(jīng)把該引入的依賴，和路由的簡單配置，簡單組件的使用給完成了
接下來我們把精力都放到NewContact.vue這個組件，后面的代碼幾乎都在這個組件
打開NewContact.vue鍵入如下代碼：
<template>
<el-row>
姓名：{{info.name}}
<el-input v-model="info.name" placeholder="請輸入姓名"></el-input>
年齡：{{info.age}}
<el-input v-model="info.age" placeholder="請輸入年齡"></el-input>
性別：{{info.sex}}
<el-select v-model="info.sex" placeholder="請選擇">
<el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 這里的key官方推薦在v-for時使用，不然會警告，但不影響使用 -->
</el-select>
</el-row>
</template>
<script>
export default {
name: "NewContact",
data(){
return {
info: {
name: '',
age: null,
sex: ''
},
options: [
'女','男','保密'
]
}
}
}
</script>
<style>
</style>
<el-input v-model="info.name"></el-input>
el-input是element-ui的組件，以el-開頭的是element-ui的組件
v-model這里的v-model是Vue的指令，官方說法是——在表單控件或者組件上創(chuàng)建雙向綁定。
="info.name"就是v-model綁定的數(shù)據(jù)，在data中return的內(nèi)容里看到info.name對應(yīng)的是''；info.age對應(yīng)的是null
return {
info: {
name: '',
age: null,
sex: ''
}
當我們打開http://localhost:8080/#/newcontact
在輸入框輸入內(nèi)容時可見，姓名：{{info.name}}雙花括號里的內(nèi)容也跟著改變，這就是雙向綁定
<el-option v-for="item in options" :key="item" :value="item">
v-for="item in options"就是循環(huán)options這個數(shù)組的內(nèi)容
options: [
'女','男','保密'
]
如果在里面添加內(nèi)容，那么下拉菜單的內(nèi)容會一起變化，一 一對應(yīng)
:value="item"會把你選的（‘女'，‘男'，‘保密'）傳給<el-select v-model="info.sex">
v-model="info.sex"會傳給data中的info.sex
return {
info: {
name: '',
age: null,
sex: ''
}
接下來在加入新代碼，NewContact.vue目前的代碼如下：
.....
</el-select>
<el-button @click="create">創(chuàng)建</el-button>
<template>
<el-table :data="tabledata" align="left">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
<el-table-column prop="sex" label="性別"></el-table-column>
<el-table-column label="操作">
<template slot-scope="a">
<el-button size="mini" type="danger" @click="del(a.$index)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-row>
</template>
<script>
export default {
name: "NewContact",
data(){
return {
info: {
name: '',
age: null,
sex: ''
},
options: [
'女','男','保密'
],
tabledata:[
{name: 'Leo', age: 12, sex: 'man'},
{name: 'Lei', age: 22, sex: 'women'},
{name: 'Lii', age: 65, sex: 'men'}
]
}
}
}
</script>
<style>
</style>
<el-button @click="create" type="success">創(chuàng)建</el-button>
這里就是創(chuàng)建了一個按鈕，@是v-on的縮寫，點擊后會出發(fā)create這個函數(shù)
<el-table :data="tabledata">
就是表格要綁定的數(shù)據(jù)
<el-table-column prop="name">
在表格綁定數(shù)據(jù)情況下prop用于數(shù)據(jù)傳遞，tabeldata里的name
<template slot-scope="a">
是Vue2.5.0后替代之前scope的作用域插槽，"a"是隨便的名字，就用用來后去table的狀態(tài)，可以獲取的row, column, $index和store，這里我們只需要獲取index就行了，相關(guān)具體內(nèi)容點這里
@click="del(a.$index)
@是v-on的縮寫，表示點擊后調(diào)用del函數(shù)，a.$index表示slot-scope獲取到的index值
tabledata:[//這里的內(nèi)容是方便我們看到table的變化，可見頁面上的table有了如下的內(nèi)容
{name: 'Leo', age: 12, sex: 'man'},
{name: 'Lei', age: 22, sex: 'women'},
{name: 'Lii', age: 65, sex: 'men'}
]
打開頁面可以看到
我們點擊創(chuàng)建和刪除按鈕并沒有反應(yīng)，所以我們要添加methods，在它內(nèi)部添加兩個方法，一個是創(chuàng)建，一個是刪除
data(){
...
},
methods: {//添加在data(){...},的后面
create(){
this.tabledata.push(this.info)//給tabledata添加一個對象（之前我們創(chuàng)建的info）
this.info = {name: '', age: null, sex: ''}//點擊創(chuàng)建后，讓option還原，而不是停留在所選的項
},
del(index){
this.tabledata.splice(index,1)//刪除點擊的對象，index是lot-scope="a" a.$index傳過來的
}
}
到這里已經(jīng)完成了添加和刪除，為了在我們刷新頁面后，數(shù)據(jù)依然保存著，我們可以用localStorage本地存儲數(shù)據(jù)
關(guān)于localStorage可以點擊這里了解
接下來我們在src內(nèi)新建一個store文件夾，和App.vue、components同一個層級，在里面新建一個store.js，內(nèi)容如下
const STORAGE_KEY = 'tabale-vuejs'//名字隨便起
export default {//向往輸出，以便組件接收
fetch() {//我們定義的獲取數(shù)據(jù)的方法
return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
|| '[]')
},
save(items) {//我們定義的保存數(shù)據(jù)的方法
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}
getItem和setItem是window.localStorage的獲取和保存數(shù)據(jù)的方法
我們用JSON.stringify和JSON.parse把數(shù)據(jù)轉(zhuǎn)成字符串和解析，這樣就方便我們寫入tabledata
接下來我們添加新代碼
<script>
import Storage from '../store/store'//新添加，把剛寫的localStorage導(dǎo)入
export default {
name: "NewContact",
data(){
return {
info: {
name: '',
age: null,
sex: ''
},
options: [
'女','男','保密'
],
tabledata: Storage.fetch()//把之前的刪除，寫入這個獲取數(shù)據(jù)的方法
}
},
methods: {
create(){
this.tabledata.push(this.info)
this.info = {name: '', age: null, sex: ''}
},
del(index){
this.tabledata.splice(index,1)
}
},
watch:{//新添加，watch是vue的監(jiān)聽，一旦監(jiān)聽對象有變化就會執(zhí)行相應(yīng)操作
tabledata{//新添加，被監(jiān)聽的對象
handler(items){Storage.save(items)},//新添加，監(jiān)聽對象變化后所做的操作，一個函數(shù)，保存數(shù)據(jù)
deep: true//深度監(jiān)聽，避免數(shù)據(jù)的嵌套層數(shù)太多，要使用深度監(jiān)聽，防止數(shù)據(jù)層級過多監(jiān)聽不到
}
tabledata:由于fetch()得到的是數(shù)組，所以直接tabledata: 后寫入就行類似于
tabledata:[{...},{...}]
當我們添加刪除數(shù)據(jù)時，可以打開chrmoe瀏覽器的F12>Application>Local Storage進行查看
總的來說就是我們點擊頁面上的創(chuàng)建按鈕，watch監(jiān)聽到tabledata有變化，就執(zhí)行savedata(items){Storage.save(items)}進行數(shù)據(jù)保存，點擊刪除時，tabledata也有變化，同樣會執(zhí)行保存
可能之前寫的內(nèi)容會有不小心寫錯字母的情況，最后把NewContact.vue稍稍修改樣式后，把完整的內(nèi)容拷貝到下方：
NewContact.vue
<template>
<el-row>
<el-col :xs="24" :sm="18" :md="14" :lg="10" id="main">
<label>姓名：</label>
<el-input v-model="info.name" placeholder="請輸入姓名"></el-input>
<label>年齡：</label>
<el-input v-model="info.age" placeholder="請輸入年齡"></el-input>
<label>性別：</label>
<el-select v-model="info.sex" placeholder="請選擇">
<el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 這里的key官方推薦在v-for時使用，不然會警告，但不影響使用 -->
</el-select>
<el-button class="btn-auto" @click="create" type="success">創(chuàng)建</el-button>
<template>
<el-table :data="tabledata" align="left">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
<el-table-column prop="sex" label="性別"></el-table-column>
<el-table-column label="操作">
<template slot-scope="a">
<el-button size="mini" type="danger" @click="del(a.$index)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-col>
</el-row>
</template>
<script>
import Storage from '../store/store'
export default {
name: "NewContact",
data(){
return {
info: {
name: '',
age: null,
sex: ''
},
options: [
'女','男','保密'
],
tabledata: Storage.fetch()
}
},
methods: {
create(){
this.tabledata.push(this.info)
this.info = {name: '', age: null, sex: ''}
},
del(index){
this.tabledata.splice(index,1)
}
},
watch:{
tabledata:{
handler(items){Storage.save(items)},
deep: true
}
}
}
</script>
<style>
#main{
float: none;
margin: 0 auto;
}
.el-input{
padding-bottom: 5px;
}
.el-select {
display: block;
}
.btn-auto{
width: 100%;
margin-top: 12px;
}
</style>
這里是localStorage:
const STORAGE_KEY = 'tabale-vuejs'
export default {
fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY)
|| '[]')
},
save(items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}
完成后我們要進行打包，方便直接在瀏覽器中運行
打開/config/index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',//加了個. 避免生產(chǎn)路徑的錯誤
/**
* Source Maps
*/
productionSourceMap: false, //改為false
然后運行$ npm run build
等待完成，會生成dist文件夾，直接打開里面的index.html就可以在瀏覽器運行了
以上所述是小編給大家介紹的基于vue-cli、elementUI的Vue超簡單入門小例子解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
很多朋友不明白在使用vue for時為什么要key，key的作用有哪些,在文中給大家詳細介紹，需要的朋友可以參考下2019-07-07
vue使用el-table 添加行手動填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點擊新增按鈕實現(xiàn)下列彈窗的效果,點擊添加行新增一行,點擊刪除進行刪除行,點擊提交將數(shù)據(jù)傳遞到后端進行保存,怎么實現(xiàn)的呢,下面通過實例代碼給大家詳細講解,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了Vue3之修改端口號方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強大的圖表功能,我們詳細說一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01
跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊，今天小編通過本文給大家介紹下vue 處理跨域問題，感興趣的朋友一起看看吧2021-09-09
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue 原生實現(xiàn)右鍵菜單組件功能，本文給大家擴展知識點vue點擊菜單以外區(qū)域，隱藏菜單操作，通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹的是vue-cli 介紹與安裝，vue-cli是和vue進行深度組合的工具，可以快速幫我們創(chuàng)建vue項目，并且把一些腳手架相關(guān)的代碼給我們創(chuàng)建好。真正使用vue開發(fā)項目，都是用vue-cli來創(chuàng)建項目的，下面文章詳細內(nèi)容,需要的朋友可以參考一下2021-10-10