注意:這里只講VUE腳手架搭建的項目
首先安裝開發環境,vue-cli 一鍵搭建vue項目是基于 Node.js 所以先要安裝node
如何安裝node在這里不做說明,請自行百度,哈哈哈哈哈哈~~~~
然后我們使用 npm 來管理
npm是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,由于新版的nodejs已經集成了npm,所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝;如果沒有安裝,可以輸入下面命令進行安裝:
npm install npm -g
安裝完npm之后再安裝webpack打包工具:
npm install webpack -g
最后全局安裝vue-cli 腳手架:
npm install vue-cli -g
好啦!環境初步建成,可以開始新建項目啦~~~~
打開終端,進入需要建立項目的文件夾下;
使用下面命令搭建項目:
vue init webpack your_project_name
然后就一路回車下去,(注意有一個地方不能回車)如下:
注意:綠色框框內是設置是否按嚴格標準檢驗代碼,如果你選擇yes,那就有得你受的了哦~~~
好啦,現在項目成功建立,再進入項目中
cd your_project_name
啟動項目:
npm run dev
好啦!現在我們vue項目已經成功搭建起來了,接下來就是安裝vue其他組件!
Vue Router
Vue Router 是vue.js官方的路由管理器。因為vue是單頁面程序,在實現路由跳轉的時候并不是傳統的使用a鏈接進行頁面跳轉,我們需要安裝vue-router;
安裝:
npm install vue-router -s
安裝之后再配置路由,在router文件夾下的index.js中
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home/home.vue'
Vue.use(Router)
export default new Router({
routes: [
{path: '/',name: '首頁',component: home},
]
})
main.js中:
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
組件中:
<router-link to="/" >首頁</router-link>
vue-router就介紹到這里了~~~~~
下面開始介紹vue另一核心組件
Vuex
安裝:
npm install vuex -s
store文件夾下index.js中:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
user:{},//用戶信息
},
//獲取倉庫值
getters:{
getUser(state){
return state.user
}
},
//修改倉庫值
mutations:{
changeUser(state,data){
state.user = data;
}
},
//異步修改倉庫值
actions:{
toUser(store,data){
$.post(
host + "/user-server/login/userLogin",
{
userName: username,
password: password,
},
function(sdata) {
store.commit('changeUser',sdata)
})
}
}
})
main.js中:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
new Vue({
el: '#app',
router,
store
components: { App },
template: '<App/>'
})
組件中:
computed:{
username(){
return this.$store.getters.getUser.name
}
},
methods:{
tologin(){
let me = this;
Login(this.loginForm.name,this.loginForm.password).then(function(res){
if(res.data.apistatus == 200){
me.$store.dispatch("toUser")//調用action里面的方法
me.$store.commit('changeUser',res.data.result.user)
me.$router.push('/')
}else {
me.$message({
message: res.data.msg,
type: 'error'
})
}
})
}
}
數據在getters里面獲取,外部使用this.$store.getters.getUser獲取,需要實時更新數據的話就要在組件中使用計算屬性computed
修改數據在mutations里面修改,第一個默認參數為state,外部提交使用this.$store.
至于vue-resource由于尤大神說過不再對vue-resource進行更新了,所以我這里介紹的是axios的用法;
安裝:
npm install axios -s
npm install qs -s //這是用于payload方式轉換成formdata方式
單獨新建一個js用于存放請求
import axios from "axios"
import qs from "qs"
const host = "http://xx.xx.xx.xx:8888"
export function Login(username,password){
return axios.post(host + '/user-server/login/userLogin',qs.stringify({
'userName':username,
'password':password
}))
}
組件中使用:
import {Login} from '../../api/login'
export default {
data() {
return {}
},
methods:{
tologin(){
let me = this;
Login(this.loginForm.name,this.loginForm.password).then(function(res){
if(res.data.apistatus == 200){
me.$store.commit('changeUser',res.data.result.user)
me.$router.push('/')
}else {
me.$message({
message: res.data.msg,
type: 'error'
})
}
})
}
}
}
完美~~~~有什么不對的地方歡迎指導!!