QQ群招募中:646258285(招募中,没几我的说话),
须要交流的朋友能够直接加我微信( DntBeliv )或QQ( 1121864253 )css
全局安装 node vue-clihtml
使用vue的脚手架直接在本地初始化项目
方法:命令行:vue init <template-name> <project-name>
vue
template-name选项为模板名称,vue-cli官方为咱们提供了5种模板。node
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。webpack
webpack-simple-一个简单webpack+vue-loader的模板,不包含其余功能,让你快速的搭建vue的开发环境。ios
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。git
browserify-simple-一个简单Browserify+vueify的模板,不包含其余功能,让你快速的搭建vue的开发环境。github
simple-一个最简单的单页应用模板。web
project-name 为项目名称。vue-router
这里以经常使用的webpack为例,
运行:vue init webpack shengyuan
【项目名不能大写】
结束后获得一个 shengyuan文件夹,里面大概就是这样了
而后当前目录命令运行:npm run dev
当看到 Compiled successfully 则表示咱们的初始化到这就成功了。
一般主要是根据项目须要在原来的基础上增删一些文件,操做下来后获得我想要的结构:(红色为修改部分)
接下来,咱们作一个home到autoPage页的跳转。
在router/index.js中
这里使用的是路由懒加载的方式:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ //滚动到顶部 scrollBehavior(to,from,savePosition){ return{x:0,y:0} }, routes: [ { path: '/', redirect: '/home', }, { path: '/home', name: 'home', component: resolve=>require(['../views/home/home.vue'],resolve), }, { path: '/autoPage', name: 'autoPage', component: resolve=>require(['../views/autoPage/autoPage.vue'],resolve), } ] })
scrollBehavior 部分用于保证跳转到新页面时,滚动条处于顶部。
在main.js中将路由挂在在app根实例上:
import router from './router' var app=new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
接下来
http://127.0.0.1:8080/#/autoPage
http://127.0.0.1:8080/#/home
路由切换成功生效。
为了更灵活的控制组件间的状态,一般咱们会使用vuex,而且还能管理一些固定的数据方便使用。
下载vuex包npm i vuex -s
新建store文件;
在store.js中
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
export default new Vuex.Store({
state: {
appName:‘demo’
},
getters: {
getState: (state) => (param) => {
return state[param];
}
},
actions: {
setState:(context,obj)=>{
context.commit(‘setState’,obj);
}
},
mutations: {
setState:(state,obj)=>{
state[obj.name]=obj.value;
}
},
modules: {
}
})
上面定义了最经常使用的方法setState,方便自定义修改state数据;
setAppName:function(){ this.$store.dispatch('setState',{name:'appName',value:this.appName}) }
效果大概就是:
npm i node-sass sass-loader -s
npm run build
而后本地打开试试一下,嗯…控制台报错,问题是index.html引用不到静态资源,错误以下:我选择 axios 主要缘由主要是:
配置:
npm i axios qs
import Vue from 'vue'
import gob from ‘./util/gob.js’
Vue.prototype.$gob =gob;
接下来经过vue对象的$gob使用就好,例home.vue使用gob中的post方法:
<span @click="$gob.post()">调用gob的post方法</span>
import axios from 'axios' import qs from 'qs' import store from '../store/store.js'
let gob = {
//域名配置
webUrl:“后台接口IP”,
post:function(vueObj,options,newUrl){//post请求
options.arg=options.arg||{};
var ipName=’’;
!newUrl?ipName=this.webUrl:ipName=newUrl;
return new Promise(function(resolve, reject) {
axios.post(
ipName+options.url,
qs.stringify(options.arg))
.then(function (response) {
//成功逻辑
resolve(response.data);
})
.catch(function (error) {
//失败逻辑
reject(error);
});
})
},
get:function(vueObj,options,newUrl){
options.arg=options.arg||{};
var ipName=’’;
!newUrl?ipName=this.webUrl:ipName=newUrl;
return new Promise(function(resolve, reject){
axios.get(ipName+options.url,{params:options.arg})
.then(function (response) {
//成功逻辑
resolve(response.data);
})
.catch(function(error){
//失败逻辑
reject(error);
});
})
},
}
export default gob
参数说明:
vueObj 必填,主要适用于请求里面获取app这个根实例。
options 必填,格式:{url:‘xxx’,arg:{}}
newUrl 选填 用于请求的接口ip不是上面的WebUrl时,这里填另外的IP。
例:home中调用gob的post方法:
methods:{ postApi:function(){ this.$gob.post(this,{url:'/getList',arg:'index:1,count:10'}).then((res)=>{ console.log(res) }) }, }
以上就是所有。
使用vue要知道的vue的生命周期图
一个vue文件可看作一个组件,这些可嵌套可复用的组件与根实例组成一个vue应用。
https://blog.csdn.net/github_38928905/article/details/90080956