Vue入門(mén)
之前一直在做java后臺(tái)，最近的項(xiàng)目開(kāi)發(fā)都是前后分離的。所以最近自己也在學(xué)習(xí)vue這個(gè)前端的框架。因?yàn)槭乔岸说闹R(shí)不是很精通，所以就通過(guò)bolg的形式記錄下來(lái)。
本地的node環(huán)境已經(jīng)安裝好了。所以就直接開(kāi)始項(xiàng)目的搭建。
項(xiàng)目搭建
我是使用VS code。通過(guò)VS code在電腦的F盤(pán)新建一個(gè)香項(xiàng)目目錄vuedemo，并進(jìn)入該項(xiàng)目。
進(jìn)入vuedemo目錄后，我們執(zhí)行命令，來(lái)初始化項(xiàng)目：
vue init webpack vuedemo
初始化的過(guò)程中，需要我們確認(rèn)一些信息，我們一直回車就行了。然后等相關(guān)的依賴安裝好。
項(xiàng)目初始化完成后，我們進(jìn)入vuedemo這個(gè)目錄，我們就可以通過(guò)命令npm install來(lái)安裝項(xiàng)目的依賴了。不過(guò)使用npm命令可以需要很長(zhǎng)的時(shí)間所以我們可以，使用淘寶的鏡像地址。
打開(kāi)命令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回車之后，我就可以可以快樂(lè)的用 cnpm 替代 npm
cnpm insatll
通過(guò)以上的命令安裝依賴。
依賴安裝完成后，我們執(zhí)行命令
npm run dev
如果不報(bào)錯(cuò)，我們就應(yīng)該可以看到以下的信息
瀏覽器訪問(wèn)地址：http://localhost:8080/#/
到這里，一個(gè)基礎(chǔ)的vue項(xiàng)目就已經(jīng)搭建好了。
使用ElementUI
element-ui是一個(gè)ui庫(kù)，它不依賴于vue。但是卻是當(dāng)前和vue配合做項(xiàng)目開(kāi)發(fā)的一個(gè)比較好的ui框架。
安裝ElementUI。
通過(guò)cmd執(zhí)行以下的命令就可以把elementui安裝到項(xiàng)目中了。
cnpm i element-ui -S
那么現(xiàn)在就引入element-ui組件模塊，用VS code打開(kāi)vuedemo項(xiàng)目。修改src/main.js文件，
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
我們把首頁(yè)的組件修改一下：
把其他多余的代碼刪除調(diào)，添加幾個(gè)elementUI組件的button標(biāo)簽。重新訪問(wèn)主頁(yè)可以看到：
