注意：这里只讲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
然后就一路回车下去，（注意有一个地方不能回车）如下：
image.png
注意：绿色框框内是设置是否按严格标准检验代码，如果你选择yes，那就有得你受的了哦~~~
好啦，现在项目成功建立，再进入项目中
cd your_project_name
启动项目：
npm run dev
image.png
好啦！现在我们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'
})
}
})
}
}
}
完美~~~~有什么不对的地方欢迎指导！！
网友评论