前期準備
全局安裝 node vue-cli
初始化項目
使用vue的腳手架直接在本地初始化項目
方法:命令行:vue init <template-name> <project-name>
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: '<App/>'
})
接下來
http://127.0.0.1:8080/#/autoPage
http://127.0.0.1:8080/#/home
路由切換成功生效。
配置vuex狀態管理及使用
爲了更靈活的控制組件間的狀態,通常我們會使用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數據;
- 使用方式:
例如在home.vue中,需要將 $store.state.appName值修改;
setAppName:function(){
this.$store.dispatch('setState',{name:'appName',value:this.appName})
}
效果大概就是:
Sass的配置使用
- 下載包:
npm i node-sass sass-loader -s
Sass 有兩種語法格式:scss(.scss)和sass(.sass)。這裏的項目使用的是scss。
具體scss的使用方式參照 sass官網文檔 就好了。下面在home中使用scss,方式如下:
到這裏基本就結束了,打包npm run build
然後本地打開試試一下,嗯…控制檯報錯,問題是index.html引用不到靜態資源,錯誤如下:
很明顯因引用地址不對,去到config.js找到build中的assetsPublicPath,用於配置靜態資源的路徑,將原來的‘/’改’./'就可以了。
到這裏,vue的基本搭建還有常用配置就結束了。
配置axios和全局方法
我選擇 axios 主要原因主要是:
- 使用Promise管理異步,告別傳統callback方式;
- 支持攔截器等高級配置
配置:
- 下載axios:
npm i axios qs
這裏的qs是配合axios使用,用於處理post請求的參數。(qs更多) - 新建文件gob.js並配置爲全局
- main.js中通過prototype 屬性向vue對象添加屬性和方法。
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>
- 在gob中封裝常用的post和get方法
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應用。
配置rem
https://blog.csdn.net/github_38928905/article/details/90080956