基于vue-cli、elementUI的Vue超簡(jiǎn)單入門(mén)小例子（推薦）

更新時(shí)間：2019年04月17日 15:53:49 作者：瓶子里的海怪

這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡(jiǎn)單入門(mén)小例子，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

這個(gè)例子還是比較簡(jiǎn)單的，獨(dú)立完成后，能大概知道vue是干嘛的，可以寫(xiě)個(gè)todoList的小例子。

開(kāi)始寫(xiě)例子之前，先對(duì)環(huán)境的部署做點(diǎn)簡(jiǎn)單的介紹，其實(shí)和Vue官方的差不多。

#如若沒(méi)有安裝過(guò)vue-cli,先全局安裝一下vue-cli
$ cnpm i -g vue-cli
#到自己喜歡的目錄下創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
#
#
#之后會(huì)有如下詢(xún)問(wèn)
? Project name (my-project) #回車(chē)
? Project description #回車(chē)，也可以寫(xiě)點(diǎn)項(xiàng)目描述
? Author #回車(chē)，或者輸入作者
? Vue build standalone #回車(chē)
? 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 #可以按上下方向鍵選擇，這里我選第一個(gè)NPM，按回車(chē)確認(rèn)
Yes, use Yarn
No, I will handle that myself
#等待完成

完成后可能會(huì)有警告，沒(méi)事，不是ERR就好

$ cd my-project #進(jìn)入剛新建的文件夾
$ cnpm install #這里用的是淘寶的NPM鏡像,不懂可以自行搜索cnpm
$ npm run dev
###I Your application is running here: http://localhost:8080

**確保端口沒(méi)被占用，打開(kāi)localhost:8080 see see **

打開(kāi)我們的項(xiàng)目可見(jiàn)如下：

名稱(chēng)	說(shuō)明
build	項(xiàng)目構(gòu)建的一些代碼
config	開(kāi)發(fā)環(huán)境的配置
node_modules	一些依賴(lài)包
src	源碼，我們就在這個(gè)文件夾內(nèi)寫(xiě)代碼
static	靜態(tài)文件
.babelrc	ES6編譯的一些配置
.editorconfig	代碼風(fēng)格配置文件
.gitignore	git上傳時(shí)忽略的一些文件，比如node_modules這個(gè)文
.postcssrc.js	聽(tīng)說(shuō)是轉(zhuǎn)換CSS樣式的
index.html	入口頁(yè)面
package-lock.json	聽(tīng)說(shuō)是更詳細(xì)的package.json
package.json	項(xiàng)目信息，項(xiàng)目名稱(chēng)，開(kāi)發(fā)的依賴(lài)的記錄等，一個(gè)JSON文件

現(xiàn)在打開(kāi)src\componnets\HelloWorld.vue 把大部分代碼刪除，剩余如下：

<template>
  <h1>{{ msg }}</h1> 
</template>
<script>
export default { //ES6語(yǔ)法，用于輸出到外部，這樣就可以在其他文件內(nèi)用import輸入
 name: 'HelloWorld',
 data () {  //由于是組件，data必須是個(gè)函數(shù)，這是ES6寫(xiě)法，data后面加括號(hào)相當(dāng)于data: function () {}
  return {  //記得return不然接收不到數(shù)據(jù)
   msg: 'Welcome' //上面的 msg 就是這里輸出的
  }
 }
}
</script>
<style>
h1 {
 font-weight: normal;
}
a {
 color: #42b983;
}
</style>

到這里用了點(diǎn)ES6語(yǔ)法，如果對(duì)export和import不了解的，建議看看相關(guān)的介紹，暫時(shí)不想看也可以照著敲代碼。不過(guò)建議還是看看，只需10分鐘了解下export和import就好—— 阮一峰ECMAScript 6 入門(mén)

可以看到，之前打開(kāi)的頁(yè)面變了樣：

####現(xiàn)在我們來(lái)安裝一下element-ui（關(guān)于element-ui詳細(xì)情況請(qǐng)自行搜索）

可以按照官方方法使用npm i element-ui -S命令進(jìn)行安裝
也可以在package.json中添加，后通過(guò)cnpm install進(jìn)行安裝

選擇2，打開(kāi)package.json，找到devDependencies并在最后加上"element-ui": “^2.2.1”

"devDependencies": {
...
...
"element-ui": "^2.2.1"

打開(kāi)命令行停止服務(wù)，再通過(guò)cnpm install進(jìn)行安裝，安裝完成后npm run dev啟動(dòng)
打開(kāi)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了
接下來(lái)在components文件夾內(nèi)新建一個(gè)NewContact.vue 文件，添加如下代碼

<template>
 <el-row>
  <el-button type="success">1</el-button>
 </el-row>
</template>
<script>

</script>
<style>

</style>

打開(kāi)之前的HelloWorld.vue對(duì)內(nèi)容進(jìn)行修改（router是官方路由插件，router-link to是router的語(yǔ)法）：

<template>
<!-- 這里router-link to="newcontact"會(huì)把路由導(dǎo)航到http://localhost:8080/#/newcontact  -->
  <router-link to="newcontact"><h1>{{ msg }}</h1></router-link>
</template>

打開(kāi)router/index.js，添加新路由（router是官方路由插件，深入學(xué)習(xí)請(qǐng)查看文檔）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewContact from '@/components/NewContact'//新添加，之后在下方的component: NewContact才會(huì)生效
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
  }
 ]
})

保存后打開(kāi)頁(yè)面可以看到如下：

之前的welcome變成了可點(diǎn)擊的鏈接，點(diǎn)擊后跳轉(zhuǎn)看到如下頁(yè)面

至此，已經(jīng)我們已經(jīng)把該引入的依賴(lài)，和路由的簡(jiǎn)單配置，簡(jiǎn)單組件的使用給完成了
接下來(lái)我們把精力都放到NewContact.vue這個(gè)組件，后面的代碼幾乎都在這個(gè)組件

打開(kāi)NewContact.vue鍵入如下代碼：

<template>
 <el-row>
  姓名：{{info.name}}
  <el-input v-model="info.name" placeholder="請(qǐng)輸入姓名"></el-input>
  年齡：{{info.age}}
  <el-input v-model="info.age" placeholder="請(qǐng)輸入年齡"></el-input>
  性別：{{info.sex}}
  <el-select v-model="info.sex" placeholder="請(qǐng)選擇">
   <el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 這里的key官方推薦在v-for時(shí)使用，不然會(huì)警告，但不影響使用 -->
  </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-開(kāi)頭的是element-ui的組件
v-model這里的v-model是Vue的指令，官方說(shuō)法是——在表單控件或者組件上創(chuàng)建雙向綁定。
="info.name"就是v-model綁定的數(shù)據(jù)，在data中return的內(nèi)容里看到info.name對(duì)應(yīng)的是''；info.age對(duì)應(yīng)的是null

return {
   info: {
    name: '',
    age: null,
    sex: ''
   }

當(dāng)我們打開(kāi)http://localhost:8080/#/newcontact

在輸入框輸入內(nèi)容時(shí)可見(jiàn)，姓名：{{info.name}}雙花括號(hào)里的內(nèi)容也跟著改變，這就是雙向綁定

<el-option v-for="item in options" :key="item" :value="item">
v-for="item in options"就是循環(huán)options這個(gè)數(shù)組的內(nèi)容

options: [
    '女','男','保密'
   ]

如果在里面添加內(nèi)容，那么下拉菜單的內(nèi)容會(huì)一起變化，一一對(duì)應(yīng)
:value="item"會(huì)把你選的（‘女'，‘男'，‘保密'）傳給<el-select v-model="info.sex">
v-model="info.sex"會(huì)傳給data中的info.sex

return {
   info: {
    name: '',
    age: null,
    sex: ''
   }

接下來(lái)在加入新代碼，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)建了一個(gè)按鈕，@是v-on的縮寫(xiě)，點(diǎn)擊后會(huì)出發(fā)create這個(gè)函數(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"是隨便的名字，就用用來(lái)后去table的狀態(tài)，可以獲取的row, column, $index和store，這里我們只需要獲取index就行了，相關(guān)具體內(nèi)容點(diǎn)這里

@click="del(a.$index)
@是v-on的縮寫(xiě)，表示點(diǎn)擊后調(diào)用del函數(shù)，a.$index表示slot-scope獲取到的index值

tabledata:[//這里的內(nèi)容是方便我們看到table的變化，可見(jiàn)頁(yè)面上的table有了如下的內(nèi)容
    {name: 'Leo', age: 12, sex: 'man'},
    {name: 'Lei', age: 22, sex: 'women'},
    {name: 'Lii', age: 65, sex: 'men'}
   ]

打開(kāi)頁(yè)面可以看到

我們點(diǎn)擊創(chuàng)建和刪除按鈕并沒(méi)有反應(yīng)，所以我們要添加methods，在它內(nèi)部添加兩個(gè)方法，一個(gè)是創(chuàng)建，一個(gè)是刪除

data(){
...
},
 methods: {//添加在data(){...},的后面
  create(){
   this.tabledata.push(this.info)//給tabledata添加一個(gè)對(duì)象（之前我們創(chuàng)建的info）
   this.info = {name: '', age: null, sex: ''}//點(diǎn)擊創(chuàng)建后，讓option還原，而不是停留在所選的項(xiàng)
  },
  del(index){
   this.tabledata.splice(index,1)//刪除點(diǎn)擊的對(duì)象，index是lot-scope="a" a.$index傳過(guò)來(lái)的
  }
 }

到這里已經(jīng)完成了添加和刪除，為了在我們刷新頁(yè)面后，數(shù)據(jù)依然保存著，我們可以用localStorage本地存儲(chǔ)數(shù)據(jù)
關(guān)于localStorage可以點(diǎn)擊這里了解

接下來(lái)我們?cè)趕rc內(nèi)新建一個(gè)store文件夾，和App.vue、components同一個(gè)層級(jí)，在里面新建一個(gè)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)成字符串和解析，這樣就方便我們寫(xiě)入tabledata
接下來(lái)我們添加新代碼

<script>
import Storage from '../store/store'//新添加，把剛寫(xiě)的localStorage導(dǎo)入
export default {
name: "NewContact",
 data(){
  return {
   info: {
    name: '',
    age: null,
    sex: ''
   },
   options: [
    '女','男','保密'
   ],
   tabledata: Storage.fetch()//把之前的刪除，寫(xiě)入這個(gè)獲取數(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)聽(tīng)，一旦監(jiān)聽(tīng)對(duì)象有變化就會(huì)執(zhí)行相應(yīng)操作
  tabledata{//新添加，被監(jiān)聽(tīng)的對(duì)象
   handler(items){Storage.save(items)},//新添加，監(jiān)聽(tīng)對(duì)象變化后所做的操作，一個(gè)函數(shù)，保存數(shù)據(jù)
   deep: true//深度監(jiān)聽(tīng)，避免數(shù)據(jù)的嵌套層數(shù)太多，要使用深度監(jiān)聽(tīng)，防止數(shù)據(jù)層級(jí)過(guò)多監(jiān)聽(tīng)不到 
 }

tabledata:由于fetch()得到的是數(shù)組，所以直接tabledata: 后寫(xiě)入就行類(lèi)似于

tabledata:[{...},{...}]

當(dāng)我們添加刪除數(shù)據(jù)時(shí)，可以打開(kāi)chrmoe瀏覽器的F12>Application>Local Storage進(jìn)行查看

總的來(lái)說(shuō)就是我們點(diǎn)擊頁(yè)面上的創(chuàng)建按鈕，watch監(jiān)聽(tīng)到tabledata有變化，就執(zhí)行savedata(items){Storage.save(items)}進(jìn)行數(shù)據(jù)保存，點(diǎn)擊刪除時(shí)，tabledata也有變化，同樣會(huì)執(zhí)行保存
可能之前寫(xiě)的內(nèi)容會(huì)有不小心寫(xiě)錯(cuò)字母的情況，最后把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="請(qǐng)輸入姓名"></el-input>
  <label>年齡：</label>
  <el-input v-model="info.age" placeholder="請(qǐng)輸入年齡"></el-input>
  <label>性別：</label>
  <el-select v-model="info.sex" placeholder="請(qǐng)選擇">
   <el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 這里的key官方推薦在v-for時(shí)使用，不然會(huì)警告，但不影響使用 -->
  </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))
	}
}

完成后我們要進(jìn)行打包，方便直接在瀏覽器中運(yùn)行
打開(kāi)/config/index.js

 build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',//加了個(gè). 避免生產(chǎn)路徑的錯(cuò)誤

  /**
   * Source Maps
   */

  productionSourceMap: false, //改為false

然后運(yùn)行$ npm run build
等待完成，會(huì)生成dist文件夾，直接打開(kāi)里面的index.html就可以在瀏覽器運(yùn)行了

以上所述是小編給大家介紹的基于vue-cli、elementUI的Vue超簡(jiǎn)單入門(mén)小例子解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: