陸川ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！
這個(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ì)有如下詢問(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)如下：
| 名稱 | 說(shuō)明 |
|---|---|
| build | 項(xiàng)目構(gòu)建的一些代碼 |
| config | 開(kāi)發(fā)環(huán)境的配置 |
| node_modules | 一些依賴包 |
| 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)目名稱，開(kāi)發(fā)的依賴的記錄等，一個(gè)JSON文件 |
現(xiàn)在打開(kāi)src\componnets\HelloWorld.vue 把大部分代碼刪除，剩余如下：
{{ msg }}
到這里用了點(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)自行搜索）
選擇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: '添加了這三行，我們就可以使用element-ui了
接下來(lái)在components文件夾內(nèi)新建一個(gè)NewContact.vue 文件，添加如下代碼
1
打開(kāi)之前的HelloWorld.vue對(duì)內(nèi)容進(jìn)行修改（router是官方路由插件，router-link to是router的語(yǔ)法）：
{{ msg }}
打開(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)把該引入的依賴，和路由的簡(jiǎn)單配置，簡(jiǎn)單組件的使用給完成了
接下來(lái)我們把精力都放到NewContact.vue這個(gè)組件，后面的代碼幾乎都在這個(gè)組件
打開(kāi)NewContact.vue鍵入如下代碼：
姓名：{{info.name}} 年齡：{{info.age}} 性別：{{info.sex}}
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)容也跟著改變，這就是雙向綁定
v-for="item in options"就是循環(huán)options這個(gè)數(shù)組的內(nèi)容
options: [
'女','男','保密'
]如果在里面添加內(nèi)容，那么下拉菜單的內(nèi)容會(huì)一起變化，一 一對(duì)應(yīng):value="item"會(huì)把你選的（‘女'，‘男'，‘保密'）傳給v-model="info.sex"會(huì)傳給data中的info.sex
return {
info: {
name: '',
age: null,
sex: ''
}接下來(lái)在加入新代碼，NewContact.vue目前的代碼如下：
.....創(chuàng)建 刪除
這里就是創(chuàng)建了一個(gè)按鈕，@是v-on的縮寫(xiě)，點(diǎn)擊后會(huì)出發(fā)create這個(gè)函數(shù)
就是表格要綁定的數(shù)據(jù)
在表格綁定數(shù)據(jù)情況下prop用于數(shù)據(jù)傳遞，tabeldata里的name
是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)我們添加新代碼
這里是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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
