【融職培訓】Web前端學習 第7章 Vue基礎教程2 建立Vue項目

1、使用vue/cli建立Vue項目

在第七章咱們已經介紹瞭如何使用npm命令全局安裝node包，本節咱們須要安裝一個名爲@vue/cli的包來建立咱們的vue項目，安裝代碼以下所示：

npm install -g @vue/cli

安裝完成以後，在命令行能夠使用Vue命令命令建立一個vue項目，具體命令以下所示

vue create hello

安裝過程須要鏈接國外服務器下載項目模板和依賴包，若是網速過慢能夠在配套示例代碼中下載項目模板，而後使用cnpm下載依賴包。

建立完成以後，讓命令行工具進入到hello目錄中，而後執行下面的命令啓動項目：

npm run serve

項目啓動後，會在8080端口開啓一個服務器，咱們直接訪問http://localhost:8080/，就能夠訪問剛纔建立的這個Vue項目了，若是成功訪問會看到以下圖所示的頁面。

2、項目目錄結構

建立的項目目錄結構以下所示：

├─hello
│    ├─node_modules
│    ├─public
│    │   ├─favicon.ico
│    │   ├─index.html
│    ├─src
│    │   └─assets
│    │   │   └─logo.png
│    │   └─components
│    │   │   └─HelloWorld.vue
│    │   └─App.vue
│    │   └─main.js
│    ├─babel.config.js
│    ├─package.json
│    ├─README.md

重要文件介紹

• node_modules：存放項目依賴包
• public：存放靜態文件(例如圖片等)
• src：項目源文件，後續開發幾乎都在這個目錄下進行
  • main.js爲項目的入口文件
  • App.vue是單文件組

組件化開發概述

以vue爲後綴的文件是vue的單文件組件，咱們在開發vue應用的過程當中，主要任務就是去編寫這些以vue爲後綴的文件。

最近幾年前端開發很是盛行的開發方式是組件化開發，要想理解什麼是組件化開發，須要先理解什麼是組件。

你們能夠把組件理解成一個，能夠自定義的，有更強大功能的標籤。

而咱們開發web項目，其實就是在編寫和組裝這些組件，例如融職教育的官網，能夠將整個應用拆分紅header，slider等等內容。

這樣用組件拆分的方式開發項目，思路清晰，簡潔高效，並且還能夠複用相同的組件。

程序是如何運行的？

import和export是ES2015的語法，相似於node的require和module.export

• import:引入第三方模塊，能夠取代require
• export:暴露接口，讓其餘模塊使用當前模塊

1 import Vue from 'vue'  
2 import App from './App.vue'
3 Vue.config.productionTip = false //開發過程當中的錯誤提示
4 new Vue({
5   render: h => h(App),
6 }).$mount('#app')

render方法是一個ES6語法的簡寫，若是完整的寫法能夠看作以下語法

1 new Vue({
2   render (createElement) {
3     return createElement(App);
4   }
5 }).$mount('#app')

render方法中的createElement能夠根據組件生成DOM節點，這樣，就成功地將單文件組件App.vue加載到index.html中了。

3、改寫App.vue文件

咱們刪除App.vue的默認代碼，只留下一個組件的估價，代碼以下所示：

<template>
     <!-- 組件的應用 -->
</template>

<script>
    //  導入其餘組件，定義該組件的數據、方法等
</script>

<style>
     /* 組件的樣式  */
</style>

• template標籤中添加的是html代碼，template內部全部內容都要包含在一個標籤以內。
• script標籤中添加的是JavaScript代碼
• style標籤中添加的是CSS樣式。

默認狀況下，vscode編輯器不能高亮顯示.vue文件，須要安裝vetur插件。

瞭解了基本語法以後，咱們來編寫第一個組件，示例代碼以下所示：

1 <template>
 2   <div>
 3     <h1>{

  
  
   
   
            
   

  {message}}</h1>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   data(){
10     return {
11       message:"hello vue"
12     }
13   }
14 }
15 </script>

上面的案例是第一節講過的一個案例，將data中的數據在文本中顯示，可是與此前的代碼有所區別：

1. 由於是單文件組件，因此須要在script中，用模塊化的語法export default將組件的示例暴露給外部。這樣組件文件才能被使用。
2. data屬性與以前相比，變成了一個方法，而data中的數據是data方法的返回值。

初學者很容易將data的用法寫錯，這裏須要十分注意。其他的寫法，例如屬性綁定，事件綁定，與此前學習過的語法沒有區別。

綁定屬性和事件的方法以下所示：

1 <template>
 2     <div>
 3         <h1 :title="message">hello world</h1>
 4         <button @click="sayHi">say hi</button>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     data(){
11         return {
12             message:"hello vue"
13         }
14     },
15     methods:{
16         sayHi(){
17             alert("Hi!")
18         }
19     }
20 }
21 </script>

4、課後練習

按照本章的內容，完成下列操做：

1. 下載vue/cli
2. 經過npm run serve命令啓動項目
3. 將默認項目改寫成一個計數器功能

 

【融職教育】在工做中學習，在學習中工做

本文同步分享在 博客"lmonkey_01"（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。