vue移動端框架搭建
一、安裝各種包(-s表示專案需要，-d表示開發需要)
1.安裝node.js , 安裝git 使用git bash命令工具
2.安裝cnpm cnpm的速度比npm快
npm install -g cnpm --registry=
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', , 'vant']
vue在html中直接引入
腳手架中已有，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 =
// 丟擲去
export default router
4.在main.js中進行掛載
// 引入router,js檔案
import router from './router,js'
new vue(
在程式設計式路由跳轉
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
六、全域性路由守衛(在router.js中配置)
router.beforeeach((to,from,next)=>elseelse{
next()
vue ui框架 你為什麼要使用前端框架Vue
1.前端框架的根本意義 1.1 前端框架的好處 最開始學習前端框架的時候 我第乙個框架是 react 並不理解框架能帶來什麼,只是因為大家都在用框架,最實際的乙個用途就是所有企業幾乎都在用框架,不用框架就 out 了.隨著使用的深入我逐漸理解到框架的好處 1.2 前端框架的根本意義 簡單來說,前端框...
Vue 框架與庫的區別 MVVM 簡單使用vue
庫 本質上是一些函式的集合。每次呼叫函式，實現一定的特定的功能，接著把控制權交給使用者 代表 jquery jquery庫核心 dom操作，即 封裝dom操作，簡化dom操作 框架 是一套完整的解決方案，使用框架的時候，需要把你的 放到框架適合的地方，框架會在合適的實際呼叫你的 代表 vue 使用規...
對指定元件進行keep alive快取 Vue
keep alive 是乙個抽象元件 它自身不會渲染乙個 dom 元素，主要用於保留元件狀態或避免重新渲染 實際專案中 當元件在內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行。可以在activated時進行重新整理操作，但是這個做法則需要在每個要...