全局安装 node vue-cli
使用vue的脚手架直接在本地初始化项目
方法:命令行:vue init
template-name选项为模板名称,vue-cli官方为我们提供了5种模板。
webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。
project-name 为项目名称。
这里以常用的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: ' '
})
接下来
http://127.0.0.1:8080/#/autoPage
http://127.0.0.1:8080/#/home
路由切换成功生效。
为了更灵活的控制组件间的状态,通常我们会使用vuex,并且还能管理一些固定的数据方便使用。
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方法:
调用gob的post方法
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