基于vue-cli、elementUI的Vue超簡單入門小例子

?

• 這個例子還是比較簡單的，獨立完成后，能大概知道vue是干嘛的，可以寫個todoList的小例子。
• 開始寫例子之前，先對環境的部署做點簡單的介紹，其實和Vue官方的差不多。

#如若沒有安裝過vue-cli,先全局安裝一下vue-cli $ cnpm i -g vue-cli #到自己喜歡的目錄下創建一個基于 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 YarnNo, I will handle that myself #等待完成

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

完成后可能會有警告，沒事，不是ERR就好

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

• 1
• 2
• 3
• 4

**確保端口沒被占用，打開localhost:8080?see see **

---

打開我們的項目可見如下：

名稱說明

build	項目構建的一些代碼
config	開發環境的配置
node_modules	一些依賴包
src	源碼，我們就在這個文件夾內寫代碼
static	靜態文件
.babelrc	ES6編譯的一些配置
.editorconfig	代碼風格配置文件
.gitignore	git上傳時忽略的一些文件，比如node_modules這個文
.postcssrc.js	聽說是轉換CSS樣式的
index.html	入口頁面
package-lock.json	聽說是更詳細的package.json
package.json	項目信息，項目名稱，開發的依賴的記錄等，一個JSON文件

現在打開src\componnets\HelloWorld.vue 把大部分代碼刪除，剩余如下：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

到這里用了點ES6語法，如果對export和import不了解的，建議看看相關的介紹，暫時不想看也可以照著敲代碼。不過建議還是看看，只需10分鐘了解下export和import就好——?阮一峰ECMAScript 6 入門

• 可以看到，之前打開的頁面變了樣：
  

####現在我們來安裝一下element-ui（關于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"

• 1
• 2
• 3
• 4

打開命令行停止服務，再通過cnpm install進行安裝，安裝完成后npm run dev啟動
打開main.js在里面添加三行內容

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/>' })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

添加了這三行，我們就可以使用element-ui了
接下來在components文件夾內新建一個NewContact.vue?文件，添加如下代碼

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

打開之前的HelloWorld.vue對內容進行修改（router是官方路由插件，router-link to是router的語法）：

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

• 1
• 2
• 3
• 4

打開router/index.js，添加新路由（router是官方路由插件，深入學習請查看文檔）

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相呼應，導航到/newcontactname: 'NewContact',component: NewContact}] })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

保存后打開頁面可以看到如下：

之前的welcome變成了可點擊的鏈接，點擊后跳轉看到如下頁面


至此，已經我們已經把該引入的依賴，和路由的簡單配置，簡單組件的使用給完成了
接下來我們把精力都放到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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

<el-input v-model="info.name"></el-input>
el-input是element-ui的組件，以el-開頭的是element-ui的組件
v-model這里的v-model是Vue的指令，官方說法是——在表單控件或者組件上創建雙向綁定。
="info.name"就是v-model綁定的數據，在data中return的內容里看到info.name對應的是''；info.age對應的是null

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

• 1
• 2
• 3
• 4
• 5
• 6

當我們打開http://localhost:8080/#/newcontact

在輸入框輸入內容時可見，姓名：{{info.name}}雙花括號里的內容也跟著改變，這就是雙向綁定


<el-option v-for="item in options" :key="item" :value="item">
v-for="item in options"就是循環options這個數組的內容

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

• 1
• 2
• 3

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

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

• 1
• 2
• 3
• 4
• 5
• 6

接下來在加入新代碼，NewContact.vue目前的代碼如下：

.....</el-select><el-button @click="create">創建</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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

<el-button @click="create" type="success">創建</el-button>
這里就是創建了一個按鈕，@是v-on的縮寫，點擊后會出發create這個函數

<el-table :data="tabledata">
就是表格要綁定的數據

<el-table-column prop="name">
在表格綁定數據情況下prop用于數據傳遞，tabeldata里的name

<template slot-scope="a">
是Vue2.5.0后替代之前scope的作用域插槽，"a"是隨便的名字，就用用來后去table的狀態，可以獲取的row, column, $index和store，這里我們只需要獲取index就行了，相關具體內容點這里

@click="del(a.$index)
@是v-on的縮寫，表示點擊后調用del函數，a.$index表示slot-scope獲取到的index值

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

• 1
• 2
• 3
• 4
• 5

打開頁面可以看到

我們點擊創建和刪除按鈕并沒有反應，所以我們要添加methods，在它內部添加兩個方法，一個是創建，一個是刪除

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

到這里已經完成了添加和刪除，為了在我們刷新頁面后，數據依然保存著，我們可以用localStorage本地存儲數據
關于localStorage可以點擊這里了解

---

接下來我們在src內新建一個store文件夾，和App.vue、components同一個層級，在里面新建一個store.js，內容如下

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))} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

getItem和setItem是window.localStorage的獲取和保存數據的方法
我們用JSON.stringify和JSON.parse把數據轉成字符串和解析，這樣就方便我們寫入tabledata
接下來我們添加新代碼

<script> import Storage from '../store/store'//新添加，把剛寫的localStorage導入 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:{//新添加，watch是vue的監聽，一旦監聽對象有變化就會執行相應操作tabledata{//新添加，被監聽的對象handler(items){Storage.save(items)},//新添加，監聽對象變化后所做的操作，一個函數，保存數據deep: true//深度監聽，避免數據的嵌套層數太多，要使用深度監聽，防止數據層級過多監聽不到 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

tabledata:由于fetch()得到的是數組，所以直接tabledata: 后寫入就行類似于

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

• 1

當我們添加刪除數據時，可以打開chrmoe瀏覽器的F12>Application>Local Storage進行查看

總的來說就是我們點擊頁面上的創建按鈕，watch監聽到tabledata有變化，就執行savedata(items){Storage.save(items)}進行數據保存，點擊刪除時，tabledata也有變化，同樣會執行保存
可能之前寫的內容會有不小心寫錯字母的情況，最后把NewContact.vue稍稍修改樣式后，把完整的內容拷貝到下方：
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">創建</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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78

這里是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))} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

---

完成后我們要進行打包，方便直接在瀏覽器中運行
打開/config/index.js

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',//加了個. 避免生產路徑的錯誤/*** Source Maps*/productionSourceMap: false, //改為false

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

然后運行$ npm run build
等待完成，會生成dist文件夾，直接打開里面的index.html就可以在瀏覽器運行了

總結

以上是生活随笔為你收集整理的基于vue-cli、elementUI的Vue超简单入门小例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。