當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js2.0开发环境搭建（二）

發布時間：2023/12/3 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js2.0开发环境搭建（二）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉載自??Vue.js 2.0從入門到放棄---入門實例（二）

前面一篇博客介紹了從零開始準備Vue.js所需的一些環境和工具。這片博客就來跟大家探討一下Vue.js 2.0中的一些特性，以及一個小實例，通過實例來跟大家分享，想必更容易理解。

先來看一下，看完這篇博客，你會做出什么樣的效果吧。

就是這樣的一個小的demo，其中主要用到了vue-router 2.0 和vue的單文件組件，這里再細分一下如下

vue-router 2.0 定義路由配置
router-view 和 router-link 來控制路由
transition 控制頁面之間的跳轉動畫
.vue后綴名的單文件組件
簡單的ES6語法

修改項目目錄結構

先來看一下項目的機構，我在原項目目錄結構上稍作調整，讓目錄結構更清晰一些。如下圖

在 src 目錄下，刪除 App.vue ，增加 pages 文件夾，該文件夾用來用來放置我們創建的“頁面”（比如，Home.vue）。其實，這里說的“頁面”也是組件，只是它變現為一個“頁面”而已，跟components 目錄下的組件沒有本質的區別，我們分開目錄放置主要是更語義化，結構更清晰易懂。

可能有的剛接觸的同學還不太了解組件（.vue后綴結尾的文件），不要著急，接著往下看。

.vue后綴名的單文件組件

這里先說一下我對組件的理解。組件，顧名思義就是一組元素組成的一個原件（理解的比較淺顯、直白），在Vue.js中，表現為一個自定義元素。開篇展示的圖中，首頁的的列表中的每一項就可以看成一個組件（事實上，在demo中，我也是這么做的），這個組件由一張圖片，一個顯示價格的元素，一個顯示名稱的元素組成，我就可以先把它定義為一個list組件。首先，我們先來分析一下兩個頁面中組件，如下圖

主頁可以看做由兩個組件組成，homeHeader和list組件，而詳情頁則可以看成是有detailHeader跟下邊的圖文內容組成（這里的圖文內容也可以寫成組件，但是博主這里想偷懶一下，有興趣的，可以自己試著寫成組件）。分析完兩個頁面的組件構成之后，我們修改項目目錄如下

這樣的目錄結構，就一目了然了吧。兩個頁面，Home和detail和其中用到的三個組件。ps：assets目錄下新建的img目錄，里邊放的一張圖片是測試用的。做了這么一大堆鋪墊，現在來簡單說一說單文件組件.vue文件。拿List.vue為例，說說單文件組件的結構，如下圖

單文件組件，由三大部分組成，template、style、script，想必看到這三個標簽元素，大家也都對其作用大概了解了吧。

template

template是放置組件的組成部分——html元素的地方，是整個組件的模板構成。不過有一點需要特別注意，template下只能存在一個根html元素作為wrapper，不能存在兩個并列的跟元素，否則會報錯。

style

style下放置組件的樣式，可以用css預處理器less或者sass等，前提是需要安裝這些依賴包，和設置lang屬性，博主比較懶，直接用css了。這個style里的樣式表在項目運行的時候會生成一個style標簽，插入到index.html的head標簽里，如果組件里的style標簽為空，則會在index.html的head里插入一個空的style標簽，所以，建議大家，這個組件沒有用到css，就不要寫一個空的style，直接省略就好。
既然每個組件的樣式都會生成一個style插入到index.html中，我們做的又是單頁面應用，所有的代碼都基于index.html的，那如果我們的項目比較大或者是多人協作開發的，難免會在寫組件的時候會命名相同的class，這樣的話，具有相同class的不同組件的樣式就會收到影響，產生不可預估的樣式問題，那豈不是很頭疼。其實，vue早就替我想到了這個問題，可以給style設置一個scoped的屬性，意思是該style里的樣式只對這個組件起作用，不會影響其他組件中含有相同class的元素。那vue是怎么做到的呢？這里先賣個關子，后邊再探究竟。

script

script里自然是放的js代碼。這里會用到一些ES6的語法，大家可以去這里?學習ES6的一些新的語法特性。在List.vue的script中，大致意思就是導出一個對象（這個組件），其中設置可以通過屬性price和title傳遞數據。看下邊的示意圖

具體的怎樣利用props傳遞數據，請看?這里。
.vue單文件組件的三大組成部分大概就是這些，具體的內容，主要是script，整個組件的功能代碼全在這里邊，大家還要多去學習和了解，由于在下才疏學淺，也只能介紹這些了。

vue-router 2.0

由于用vue主要開發單頁面應用，沒有頁面之間的跳轉，在vue中，一個所謂的“頁面”實則是一個看起來很像“頁面”的一個組件（這個組件大部分情況下包含其他子組件）而已。既然沒有頁面，那怎樣實現頁面之間的切換呢？那就是我們現在要介紹的主角——vue-router 2.0。 vue-router是在vue中控制路由的。ps：如果你不太理解路由這個概念，可以簡單的理解為url重的hash部分，只不過vue做了一些封裝和完善。要控制路由，還需要借助兩個vue-router自帶的兩個組件router-view和router-link。

安裝vue-router 2.0

打開命令行，cd到當前項目的目錄，運行?cnpm install vue-router --save ?，f等待安裝完成即可。

router-view

router-view是現實路由內容的地方，即如果有多個“頁面”需要切換，顯示當前“頁面“的地方。需要注意的是，使用vue-router控制路由則必須router-view作為容器。

router-view還可以嵌套，即嵌套路由，詳情去?這里學習喲~

router-link

router-link有一個to屬性，其屬性值是目標路由，在運行項目的時候，router-link表現為a標簽，to屬性則表現為a標簽的href屬性。至于，為什么不直接用a標簽，我也不知道呢。如果你知道的話，可以留言告訴我，不勝感激的呢~

這是List組件中用到的router-link組件。
基本的概念和準備工作都做好了，剩下的就是貼代碼了，瞬間感覺輕松好多。
修改根目錄下的index.html如下：  <!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>first-vue</title><style type="text/css">* { margin: 0; padding: 0; }html,body { background: #eee; }ul,li { list-style: none; }a { text-decoration: none; }img { vertical-align: middle; }/* 跳轉頁面動畫 */.slide-enter,.slide_back-enter {position: absolute;width: 100%;}.slide-leave,.slide_back-leave {position: absolute;width: 100%;}.slide-enter-active,.slide_back-enter-active {transition: all 0.3s linear;}.slide-leave-active {position: absolute;transition: all 0.3s linear;transform: translate(-100%);}.slide-enter{transform: translateX(100%);}.slide_back-leave-active {position: absolute;transition: all 0.3s linear;transform: translate(100%);}.slide_back-enter {transform: translateX(-100%);}</style></head><body><div id="app"><transition :name="transitionName"><router-view></router-view></transition></div><script type="text/javascript">// 計算html的font-size(function(){function resizeBaseFontSize(){var rootHtml = document.documentElement,deviceWidth = rootHtml.clientWidth;if(deviceWidth > 640){deviceWidth = 640;}rootHtml.style.fontSize = deviceWidth / 7.5 + "px";}resizeBaseFontSize();window.addEventListener("resize", resizeBaseFontSize, false);window.addEventListener("orientationchange", resizeBaseFontSize, false);})();</script></body> </html>

其中 transition組件是用來控制頁面切換的動畫用的，transitionName綁定到的是main.js中的data中的transitionName字段。

修改src目錄下的main.js如下： // main.js// 導入Vue，這個是必需的，在使用Vue之前，必須先導入 import Vue from 'vue'// 導入 vue-router，并使用 import VueRouter from 'vue-router' Vue.use(VueRouter)// 導入 pages 下的 Home.vue import Home from './pages/Home' import Detail from './pages/Detail'// 定義路由配置 const routes = [{path: '/',component: Home},{path: '/detail',component: Detail} ]// 創建路由實例 const router = new VueRouter({routes })// 創建 Vue 實例 new Vue({el: '#app',data(){return {transitionName: 'slide'}},router, // 在vue實例配置中，用routerwatch: {// 監視路由，參數為要目標路由和當前頁面的路由'$route' (to, from){const toDepth = to.path.substring(0, to.path.length-2).split('/').length// 官方給出的例子為 const toDepth = to.path.split('/').length 由于現在只有兩個路由路徑'/'和'/detail'// 按照官方給的例子，這兩個路由路徑深度都為 2 ，所以，這里稍作調整，不知道有什么不妥// 但目前在這個demo中能正常運行，如果知道更好的方法，歡迎留言賜教const fromDepth = from.path.substring(0, from.path.length-2).split('/').lengththis.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'// 根據路由深度，來判斷是該從右側進入還是該從左側進入}} })
HomeHeader.vue代碼  <template><header class="header"><div class="header_inner"><div class="header_cont">主頁</div></div></header> </template><style>.header {height: 0.88rem;}.header_inner {position: fixed;top: 0;left: 0;right: 0;z-index: 99;max-width: 640px;height: 0.88rem;box-sizing: border-box;margin: 0 auto;padding: 0 0.24rem;border-bottom: 0.02rem solid #80ccd6;background-color: #fff;}.header_cont {text-align: center;padding: 0 0.4rem;line-height: 0.86rem;font-size: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} </style>
List.vue代碼  <template><li class="sec_li"><router-link to="/detail" class="lp_li_a"><div class="lp_li_imgWrap"><img src="../assets/img/lp_01.jpg" alt=""></div><p class="lp_li_name">{{ title }}</p><p class="lp_li_price">￥{{ price }}元</p></router-link></li> </template><style scoped>.sec_li {float: left;width: 50%;margin-bottom: 0.1rem;}.lp_li_a {display: block;padding: 0.3rem 0;margin: 0 0.05rem;text-align: center;background: #fff;}.lp_li_imgWrap {padding: 0.24rem 0;}.lp_li_imgWrap > img {width: auto;height: 2.3rem;}.lp_li_name {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #333;}.lp_li_price {height: 0.5rem;line-height: 0.5rem;font-size: 16px;color: #fb3b3b;} </style> <script>export default {props: ['price', 'title']} </script>

DetailHeader.vue代碼  <template><header class="header"><div class="header_inner flexWrap"><div id="header_btn_nav" class="header_btn header_btn_back"v-on:click="goBack">返回</div><div class="header_cont flex">詳情</div><div class="header_btn header_btn_cart"></div></div></header> </template><style>.flexWrap {display: -webkit-flex;display: flex;}.flex {flex: 1;}.header {height: 0.88rem;}.header_inner {position: fixed;top: 0;left: 0;right: 0;z-index: 99;max-width: 640px;height: 0.88rem;box-sizing: border-box;margin: 0 auto;padding: 0 0.24rem;border-bottom: 0.02rem solid #80ccd6;background-color: #fff;}.header_btn {width: 0.5rem;height: 100%;background-repeat: no-repeat;}.header_btn_back {line-height: 0.86rem;}.header_cont {text-align: center;padding: 0 0.4rem;line-height: 0.86rem;font-size: 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.header_btn:active {opacity: 0.7;} </style> <script>export default {methods: {goBack(){window.history.back();}}} </script>
Home.vue代碼  <template><div class="container"><home-header></home-header><div class="content"><ul class="cont_ul"><listv-for="item in items":price="item.price":title="item.title"></list></ul></div></div> </template> <style>.container {max-width: 640px;margin: 0 auto;overflow-x: hidden;}.cont_ul {padding-top: 0.05rem;margin: 0 -0.12rem;}.cont_ul:after {content: "";display: block;width: 0;height: 0;clear: both;} </style> <script>// 導入要用到的子組件import HomeHeader from '../components/HomeHeader'import List from '../components/List'export default {data () {return {items: [{ price: "129.00", title: "大學" },{ price: "256.00", title: "中庸" },{ price: "399.00", title: "論語" },{ price: "998.00", title: "孟子" },{ price: "99.00", title: "道德經" },{ price: "89.00", title: "老子" },{ price: "188.00", title: "金剛經" },{ price: "209.00", title: "易筋經" },]}},// 在components字段中，包含導入的子組件components: {HomeHeader,List}} </script>
Detail.vue代碼  <template><div class="detail"><detail-header></detail-header><img src="../assets/img/lp_01.jpg" alt=""><p>崇賢館始置唐代太宗朝。1999年，李克先生及志同道合者復興其宗旨。以積累、傳播中華優秀傳統文化，提供全新國學體驗館為宏愿。</p><p>其間，在季羨林、馮其庸等國學大師及著名文史學家傅璇琮、毛佩琦先生指導下，耕注先賢原典，以宣紙線裝精品形式呈奉世人。作為一家國學傳播機構，崇賢館始終致力于中華傳統文化的傳承和推廣，以古籍線裝宣紙書的形式，對浩繁的史海巨著進行經典復刻。不僅如此，崇賢館還延請了傅璇琮、毛佩奇等諸位在國學界內享有盛譽的專家和學者擔綱學術顧問，以精益求精的治學態度面對每一部崇賢館的作品，使之成為學術史中無尚的精品。</p></div> </template> <style>.detail {padding: 0.24rem;font-size: 12px;}img {display: block;width: 80%;margin: 0 auto 0.2rem;}p {font-size: 14px;line-height: 0.5rem;text-align: justify;padding-bottom: 0.24rem;} </style> <script>import DetailHeader from '../components/DetailHeader'export default {components: {DetailHeader}} </script>
最后，差點忘了，style的scoped屬性的問題?，F在，我們把List.vue中的style加上scoped屬性，然后在命令行cd到項目目錄，運行 npm run dev ，在瀏覽器訪問localhost:8080，然后審查列表標簽，會發現在列表標簽中多了一個自定義屬性，如下

相應的css選擇器也成了復合選擇器，在原有選擇器基礎上復合了一個屬性選擇器，so~~這就是style scoped的奧秘之處。
這下應該沒有什么遺漏了吧，好累，心好累~~~
哦，對了，如果用sublime開發，建議安裝vue的插件，支持語法高亮喲~
應有些朋友的需求，把項目源碼托管到github上，項目網址?https://github.com/Angewell/firstVue
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue.js2.0开发环境搭建（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
环境

上一篇： Vue.js2.0开发环境搭建（一）
下一篇： Vue.js2.0开发环境搭建（三）