vue移動端框架搭建
一、安裝各種包（-S表示項目需要，-D表示開發需要）
1.安裝node.js , 安裝git 使用git bash命令工具
2.安裝cnpm cnpm的速度比npm快
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安裝腳手架：
cnpm install @vue/cli -g
4.創建項目：
vue create vue-study(項目名字)
cd vue-study 進入項目，在啟動服務器
5.啟動項目：進入項目目錄，執行 npm run serve，啟動一個本地開發服務器
(建議在package.json文件夾中的"scripts"配置"start":"npm run serve")
這樣就能在不同的框架中使用同一個名稱啟動不同的項目。
關閉服務 ctrl+c
6.安裝各種插件：
Element (組件)
cnpm i element-ui -S
vant (組件)
有贊出品
Vant，是一個專注於移動的Vue UI組件庫
cnpm install vant -S
cnpm install babel-plugin-import -D
配置babel.config.js 需要重啟服務
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
Vue
在html中直接引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue. js"></script>
腳手架中已有，import Vue from 'vue' 引入即可
Vuex (狀態管理)
cnpm install vuex -S
Sass (css組件，可以使css嵌套書寫)
cnpm install sass-loader -D
cnpm install sass -D
axios (代理跨域)
npm install axios -S
創建vue.config.js
配置：// 每次修改都要重啟服務器
module.exports = {
devServer:{
// 本地服務端口號（自定義端口號）
port:"8090",
// 當訪問的路徑有/jd就代理制 http://10.36.135.29:9999服務器
proxy:{
'/jd':{
target:"http://10.36.135.29:9999",//代理請求數據
ws:true,
changeOrigin:true
}
}
}
}
7.下載別人的代碼時不要下載node_modules包，在項目中執行npm install 就可以下載相關的依賴包
二、創建路由
1.單頁面應用程序 VS 多頁面應用程序
單頁面應用程序，實際是通過路由對組件進行管理的，url發生變化，組件切換，就形成了視覺上的切換
實際上就只有一個頁面
2.安裝集成路由(-S表示項目需要，-D表示開發需要)
cnpm install vue-router -S
3.在src目錄下創建 router.js文件
編寫以下代碼：
// 引入vue
import Vue from 'vue'
// 引入路由vue-router
import VueRouter from 'vue-router'
// 創建路由
Vue.use(VueRouter)
// 引入組件
import Home from './views/Home.vue'
const router = new VueRouter({
routes:[
// 當在url中出入/home時，顯示Home.vue頁面
{path:'/home',component:Home}
]
})
// 拋出去
export default router
4.在main.js中進行掛載
// 引入router,js文件
import router from './router,js'
new Vue({
// 掛載
router,
render:h=>h(App)
}).$mount('#app')
5.在App.vue中，通過router-link完成跳轉鏈接
如：to:url跳轉的名稱 exact:名稱高度匹配才跳轉 tag:解析在html中是span標簽 active-class:高亮顯示
<router-link to='/home' exact tag="span" active-class="on"></router-link>
6.通過<router-view>來展示url所匹配成功的組件
三、 項目中各個文件夾的作用
node_modules 用於存放各種安裝的包，導入項目時不需要導入，在項目中 npm install就可以下載。
public 用於存放較大的圖片
src/assets 用於存放小小的icon，小背景圖(建議少用background)
src/components 用於存放頁面中的內容人信息，如新聞
src/store 用於存放狀態管理工具(自己創建，根據自己的需求)
src/utils 用於存放共享的數據，組件(自己創建)
src/views 用於存放vue文件(自己創建)
四、小知識點
1.編程路由跳轉 this.$router.push()指定性跳轉 / replace()指定性跳轉 / back()跳轉到上一頁
2.路由傳參
在router.js里配置路由
{ path:'/detail/:id',component:Detail }
在編程式路由跳轉
this.$router.push('/detail/'+id(要傳的值))
在接受頁面動態接收參數
this.$router.params.id(接受的值)
3.兩種客戶端的路由模式
mode='hash'(默認)
缺點：URL中有#不好看
優點：部署到服務器上時，單頁面刷新不會出現404
mode='history'
優點：URL中沒有#
缺點：部署到服務器上時，單頁面刷新會出現404，解決方法是要求后端或運維在服務器（Nginx）上做重定向處理
4.路由懶加載
const Home = ()=>import('@/views/Home.vue')
作用：應用程序組件異步加載，節省應用程序初始化的性能
結合Vue的異步組件和webpack的代碼分割功能，實現組件的懶加載
五、狀態管理
分別有四個函數
state:{} 共享數據的共享
getters:{} 相當是計算屬性
mutations:{} 用來操作state
action:{}
1.action是vuex官方建議，與后端接口對接的入口
2.工作中，一般讓那些被多個組件共享的后端數據，走action
3.在action中，可以直接修改state,但不推薦這樣做，因為這樣寫Devtools不能監視（Devtools是用於查看vue的數據，狀態信息）
// action是Vuex官方建議的，與后端接口對接的入口
// 工作中，一般讓那些需要被多個組件共享的后端數據，走actions
// 在actions中，可能直接修改state，但是不推薦這么做
在src目錄下建store文件夾，在里面創建index.js文件，在創建modules文件夾
index.js文件
test.js
詳細看：
https://github.com/jay267758 中的 wapapp
六、全局路由守衛（在router.js中配置）
router.beforeEach((to,from,next)=>{
console.log(to) // 當前要進入的目標路由
console.log(from) // 當前要離開的目標路由
console.log(next) // next實現跳轉功能
// 判斷token(是否登錄)，實現頁面是否顯示
if(to.path === '/cart' || to.path === '/user'){ //要跳轉到這兩個頁面
let token = localStorage.getItem("token")
if(token){ // 是否有token,有就跳轉，沒有跳到/login
next()
}else{
next("/login")
}
}else{
next()
}
})