【Vue】撩起頭蓋來，讓我看看你（初始化與學習Vue項目）
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯繫本人刪除，謝謝！
Vue簡介
相信都聽過vue，畢竟有一句話，前端會vue就行，額，這句話還有待商討，這裏不做討論。
官方介紹
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
介紹
一款方便操作，方便學習，方便工作的前端敲門磚。
Vue的特點
1、體積小
2、更高的執行效率（虛擬DOM）
3、雙向數據綁定（更加關注業務操作）
4、組件化開發
5、漸進式（可以嵌入部分vue的代碼）
安裝
//是否安裝vue
vue -V
// 出現版本說明已安裝
@vue/cli 4.5.8
// 安裝vue
npm install vue
頁面引入
可以在html中引入vue的js使用
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
vue-cli
Vue 提供了一個官方的 CLI，爲單頁面應用 (SPA) 快速搭建繁雜的腳手架。它爲現代前端工作流提供了開箱即用的構建設置。只需要幾分鐘的時間就可以運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔。
安裝
// 全局安裝 vue-cli
npm install --global vue-cli
創建一個vue的項目
進入自己工作目錄
vue init webpack projectNmae
初始化項目的配置
選擇配置好對應的參數，剛開始學習vue項目時可以選擇使用如上的配置
運行
進入到項目目錄
npm install // 安裝項目依賴
npm run dev // 運行
打開運行的地址
Vue的項目目錄
一張圖解釋vue-cli生成的目錄，pages是我自己加上的，pages放入頁面，component放入一些公用的組件。
其實對於build和config目錄需要詳細的解釋一下，不過看了一下標題，還是選擇吧src這個目錄來做掀起頭蓋的棍吧。主要看一下router，是不是有一種感覺，router這個詞經常出現，它就是路由。
Vue路由
路由讓我們可以設置不同的參數，通過我們起的服務器加上在router裏面配置的參數，也就是路徑，這樣就實現了多個頁面存在同一個地址，且可以反覆互相跳轉。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LongTouch from '@/pages/LongTouch/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/long-touch',
name: 'LongTouch',
component: LongTouch
}
]
})
子路由
當然這個路由的配置也可以設置子路由，設置子路由時，需要注意路徑的拼接。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ImgPage from '@/components/ImgPage'
import LongTouch from '@/pages/LongTouch/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children:[
{
path: '/img',
name: 'img',
component: ImgPage,
}
]
},
{
path: '/long-touch',
name: 'LongTouch',
component: LongTouch
}
]
})
路由跳轉
在日常的業務中，對頁面進行跳轉時不可避免的硬性需求，跳轉可以通過使用html和js
使用router-link方式（html）
<router-link :to="{ name: 'user', params: { userId: 1 }}">User</router-link>
使用router.push() （js）
router.push({ name: 'user', params: { userId: 1 }})
思考
到了這裏能會了啥？基本瞭解了vue，安裝初始化一個vue-cli項目，瞭解它的基本目錄，能夠運行起來，瞭解了路由，可以做到頁面的跳轉，可以做一些跳轉的交互。
感謝
萬能的網絡
公衆號-歸子莫，小程序-小歸博客