基於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 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 項目構建的一些代碼
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>
到這裏用了點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"

打開命令行中止服務，再經過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/>'
})

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

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

</script>
<style>

</style>

打開以前的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>

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

保存後打開頁面能夠看到以下：

以前的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>
<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: ''
}
當咱們打開http://localhost:8080/#/newcontact

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


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

options: [
'女','男','保密'
]
若是在裏面添加內容，那麼下拉菜單的內容會一塊兒變化，一 一對應
: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">建立</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">建立</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'}
]
打開頁面能夠看到

咱們點擊建立和刪除按鈕並無反應，因此咱們要添加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傳過來的
}
}
到這裏已經完成了添加和刪除，爲了在咱們刷新頁面後，數據依然保存着，咱們能夠用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.getItem(STORAGE_KEY, JSON.stringify(items))
}
}
getItem和getItem是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//深度監聽，避免數據的嵌套層數太多，咱們要使用深度監聽，這樣即便數據層級過多監聽不到
}
}
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>
這裏是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: './',//加了個. 避免生產路徑的錯誤

/**
* Source Maps
*/

productionSourceMap: false, //改成false
而後運行$ npm run build
等待完成，會生成dist文件夾，直接打開裏面的index.html就能夠在瀏覽器運行了

也能夠點這裏看看效果--------------------- 做者：裝在套子裏的還怪 來源：CSDN 原文：https://blog.csdn.net/csdnear/article/details/79426915