Vue自動化工具（Vue-CLI）

本文轉載自查看原文 2019-03-12 18:17 869 vue

一.組件的概念

　　1.概念

    組件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重復的，
而且很多不同的網站之間，也存在同樣的功能。

    而在網頁中實現一個功能，需要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要
使用js來定義功能的特效，因此就產生了把一個功能相關的[**HTML、css和javascript]代碼封裝在一
起組成一個整體的代碼塊封裝模式，我們稱之為“組件”。

　　所以，組件就是一個html網頁中的功能，一般就是一個標簽，標簽中有自己的內容結構，樣式和特效。

　　這樣，前端人員就可以在開發時，只需要書寫一次代碼，隨處引入即可使用。

　　組件有兩種：默認組件[全局組件] 和單文件組件

　　2.默認組件(全局組件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='js/vue.js'> </script>
</head>
<body>
    <div id="app1" >
        <span @click='num++'>+</span>
        <input type="text"  size='1' v-model='num'>
        <span @click='num--'>-</span>    
    </div>
    <script>
        let vm1=new Vue({
            el:'#app1',
            data:{
                num:0
            }
        })
    </script>



<!-- ###################################################################### -->
    <div id="app2"> 
        <componmen></componmen>
        <componmen></componmen>
    </div>

    <script>
       Vue.component("componmen",{
           //html視圖模板代碼,這里的代碼和前面我們寫的 沒有什么區別
           template:"<div><span @click='num++'>+</span><input type='text'  size='1' v-model='num'><span @click='num--'>-</span></div>",
            methods:{
                //這里定義當前組件的htmk代碼中需要調用的方法
            },
            data:function(){
                //局部可用
                //這里的data就是我們需要使用到的局部數據,
                //必須return,返回一個jason對象
                return{
                    num:0
                }

            }
       })

       let vm2=new Vue({
           el:'#app2',
           data:{}
       })

    </script>
    
</body>
</html>

View Code

二.vue-cli的安裝

　　1.為什么要安裝使用vue-cli

　　前面學習了普通組件以后，接下來我們繼續學習**單文件組件**則需要提前先安裝准備一些組件開發工具。否則無法使用和學習單文件組件。

　　一般情況下，單文件組件，我們運行在 自動化工具vue-CLI中，可以幫我們編譯單文件組件。所以我們需要在系統中先搭建vue-CLI工具，

　　2.安裝過程

官網連接:https://cli.vuejs.org/zh/

1.安裝vue-cli需要依賴Node.js 8.9 或者更高的版本

2.所以我們需要安裝node.js

3.而要安裝Node.js最好使用nvm 或 nvm-windows在同一台電腦中管理多個 Node 版本。

　　所以我們現在是按照和上面相反的順序把軟件一一的裝進去

　　1.nvm工具的下載和安裝：https://www.jianshu.com/p/d0e0935b150a

　　1.打開連接去gihub下載

　　2.解壓是一個exe文件,雙擊安裝

　　　　指定nvm的安裝路徑

　　　　指定nodejs安裝路徑

　　3.確認安裝成功並且加入了環境變量

注意:

　　如果使用nvm工具，則直接可以不用自己手動下載，如果使用nvm下載安裝 node的npm比較慢的時候，可以修改nvm的配置文件(在安裝根目錄下settings)

　　# settings.txt
　　root: C:\tool\nvm [這里的目錄地址是安裝nvm時自己設置的地址,要根據實際修改]
　　path: C:\tool\nodejs
　　arch: 64 [操作系統版本]
　　proxy: none
　　node_mirror: http://npm.taobao.org/mirrors/node/ [鏡像員]
　　npm_mirror: https://npm.taobao.org/mirrors/npm/

　　　　2.安裝nodejs

這邊我們使用已經安裝了的nvm安裝nodejs:


　　1.查看我們已經安裝的nodejs
　　　　nvm list # 列出目前在nvm里面安裝的所有node版本

　　2.安裝nodejs

　　　　nvm install node版本號    # 安裝指定版本的node.js
　　　　#如nvm install 10.15.3    #不需要帶lts或者current
　　
　　3.切換nodejs
　　　　node.js nvm use node版本號    # 切換當前使用的node.js版本


　　4.卸載nodejs
　　　　nvm uninstall node版本號 # 卸載指定版本的

注意:我們只要執行前面三步就好,查看已安裝,去官網查看版本號,在這邊安裝,切換到我們需要使用的nodejs,當我們再去查看的時候會多個nodejs中正在使用的版本前面有*號

　　 我們一般安裝LTS(長線支持版本)：

node.js的版本有兩大分支：

　　官方發布的node.js版本：0.xx.xx 這種版本號就是官方發布的版本

　　社區發布的node.js版本：xx.xx.x 就是社區開發的版本

　　安裝成功后直接命令:node -v查看版本來確認安裝成功

　　　　3.安裝vue-cli

命令:  npm install -g vue-cli


注意:vue會自動安裝到nodejs的安裝目錄中,nodejs已經加入了環境變量,所以可以在命令行全局調用

三. vue-cli初始化創建項目

　　1.生成項目目錄

用vue自動化工具可以快速搭建單頁應用項目目錄。

該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鍾即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

　　// 生成一個基於 webpack 模板的新項目

　　1.在命令行中近路要創建項目的路徑

　　
　　2. vue init webpack 項目名
　　例如：
　　 vue init webpack myproject

　　　在初始化的時候,系統會有很多的選項,一路選否(n),這樣創建出來的項目才是干凈的,我們后邊需要什么再自己手動創建就可以了

　　// 啟動開發服務器 ctrl+c 停止服務

　　3.進入項目文件夾
　　　　cd myproject

　　4.啟動項目
　　　　npm run dev # 運行這個命令就可以啟動node提供的測試http服務器

　　瀏覽器訪問:http://localhost:8080/

　　看到這個界面,說明你成功了

　　2.項目的目錄結構

src   主開發目錄，要開發的單文件組件全部在這個目錄下的components目錄下

static 靜態資源目錄，所有的css，js文件放在這個文件夾

dist項目打包發布文件夾，最后要上線單文件項目文件都在這個文件夾中[后面打包項目,讓項目中的vue組件經過編譯變成js 代碼以后,dist就出現了]

node_modules目錄是node的包目錄，

config是配置目錄，

build是項目打包時依賴的目錄

src/router   路由,后面需要我們在使用Router路由的時候,自己聲明.

　　3. 項目執行流程圖

　　整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,
App.vue中會通過組件嵌套或者路由來引用components文件夾中的其他單文件組件。

四.單文件組件的使用

　　1.概念

組件有兩種：普通組件、單文件組件

普通組件的缺點：

1. html代碼是作為js的字符串進行編寫，所以組裝和開發的時候不易理解，而且沒有高亮效果。
2. 普通組件用在小項目中非常合適，但是復雜的大項目中，如果把更多的組件放在html文件中，那么維護成本就會變得非常昂貴。
3. 普通組件只是整合了js和html，但是css代碼被剝離出去了。使用的時候的時候不好處理。

　　將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，
相當於一個組件具有了結構、表現和行為的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名為“.vue”，比如："Home.vue"。

　　2.創建文件

如圖:


注意: 文件格式,文件路徑

　　3.編寫文件

　　　　1.template編寫html代碼的地方

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>

　　　　2.script編寫vue.js的地方

<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

　　　　3.style編寫當前組件樣式代碼,記得style標簽要記得加scoped表示局部的

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

　　4.在App.vue組件中調用上面的組件

#調用主要有幾個步驟,
#1.是把html模板調到App.Vue的模板template
 #在調入組件前要先導入要調用的文件
#2.是把組件調到這邊的組件

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <HelloWorld/> -->
    <Home/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
//當前組件的js代碼
//name:組件名,'組件名'將來會以對象形式被其他組件導入
//compoment:用的子組件{
 //     組件名1,
  //     組件名2
  //              }
//data:function(){ 
  //          return{
    //          變量名:變量
    //          變量民:變量
  //}
   //         }

import Home from './components/Home'
export default {
  name: 'App',
  components: {
    Home,
    // HelloWorld
  }
}
</script>



<style scoped>
/*style最好寫上是scoped來限制成局部的*/
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

五.組件的嵌套

　　　有時候開發vue項目時,頁面也可以算是一個大組件,同時頁面也可以分成多個子組件. 　　　因為,產生了父組件調用子組件的情況.
　　　
　　1.我們可以聲明一個組件home.vue,作為父組件

　　　　在components/創建一個保存子組件的目錄HomeSon
　　　　

　　　　就是說home.vue是首頁,這個頁面需要用到很多東西,我們鍵一個文件夾和home.vue同級的,然后在homeson里面寫的文件作為home的子組件

　　　　2.在HomeSon目錄下,可以創建當前頁面的子組件,例如,是Menu.vue

<template>
    <div id='Menu'>
        <span>{{msg}}</span>
    </div>
</template>



<script>
export default {
    name:'Menu',
    data:function(){
        return{
            msg:'這是MEnu的東西'
        }
    }

}
</script>

　　3.然后，在父組件中調用上面聲明的子組件

#一樣的的,調用有三個步驟
#1.在template中調用
#2.在script中導入
#3.在script中調用

<template>
    <div id='home'>
        <span class='sub' @click='num--'>-</span>
        <input type="text" v-model="num">
        <span class='add' @click='num++'>+</span>
        <Menu/>        #調用
        <Header/>
    </div>
</template>

<script>
import Menu from './HomeSon/Menu' #導入
import Header from './HomeSon/Header'
export default {
    name:'Home',
    data:function(){
        return{
            num:0,

        }
    },
    components:{
        Menu,    #調用
        Header
    }
}
</script>


<style scoped>
    .sub,.add{
        color:blue;

    }

</style>

　　4.在app.vue調用父組件

總結:

組件的嵌套就是:
　　我想打你兒子,但是我自己懶得打,我就打你,打到你把你兒子抓過來,你把你兒子抓過來,我抓住了你,我也就抓住你兒子,這么簡單

六.數據傳遞

　　例如我們的父組件有些數據需要運用到子組件中展示,我們就可以把數據從父組件中傳到子組件中

　　一般是需要三個步驟:

　　　　1.父組件傳遞

　　　　2.子組件接收

　　　　3,子組件展示

　　　1.在父組件調用子組件的組名處,使用屬性值的方式向子組件傳遞數據

　　　　　　home.vue

<template>
    <div id='home'>
        <span class='sub' @click='num--'>-</span>
        <input type="text" v-model="num">
        <span class='add' @click='num++'>+</span>
        <Menu :mynum="num" title='home大爺賞給menu的'/>
        <Header :mynum='num' title='這是home賞給header的'/>
    </div>
</template>

# 上面表示在父組件調用Menu子組件的時候傳遞了2個數據：
如果要傳遞變量[變量可以各種類型的數據]，屬性名左邊必須加上冒號:，同時，屬性名是自定義的，子組件接收數據就是通過屬性名的,
如果要傳遞普通字符串數據，則不需要加上冒號:

　　2.在子組件中接受上面父組件傳遞的數據，需要在vm組件對象中，使用props屬性類接受。

　　　　menu.vue

<script>
export default {
    name:'Menu',
    props:['mynum','title'],   #prop接收數據
    data:function(){
        return{
            msg:'這是MEnu的東西'
        }
    }

}
</script>

　　3.在子組件中的template中使用父組件傳遞過來的數據

　　　　menu.vue

<template>
    <div id='Header'>
        <span>{{msg}}</span>
        <span>{{mynum}}</span>   
        <span>{{title}}</span>    #展示他老爸給的東西
        <input type="text" v-model='mynum'>
    </div>
</template>

　　整體流程:　　　　

　　注意點:

使用父組件傳遞數據給子組件時, 注意一下幾點:

1. 傳遞數據是變量,則需要在屬性左邊添加冒號.

   傳遞數據是變量,這種數據稱之為"動態數據傳遞"

   傳遞數據不是變量,這種數據稱之為"靜態數據傳遞"

2. 父組件中修改了數據,在子組件中會被同步修改,但是,子組件中的數據修改了,是不是影響到父組件中的數據.

   這種情況,在開發時,也被稱為"單向數據流"

七.在組件中使用axios

　　默認情況下，我們的項目中並沒有對axios包的支持，所以我們需要下載安裝。

　　1. 在項目根目錄中使用 npm安裝包

npm install axios

　　2. 接着在main.js文件中，導入axios並把axios對象掛載到vue屬性中多為一個子對象，這樣我們才能在組件中使用。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 這里表示從別的目錄下導入 單文件組件
import axios from 'axios'; // 從node_modules目錄中導入包
Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把對象掛載vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

　　3.在組件中使用

<template>
    <div id='Menu'>
        <span>{{msg}}</span>
        <button @click='getweather'>點我獲取最新天氣</button>
    </div>
</template>


<script>
export default {
    name:'Header',
    props:['mynum','title'],
    data:function(){
        return{
            msg:'這是Menu的東西'

        }
    },
    methods:{
        getweather:function(){
　　　　　　#就這邊有差別,要不然和以前沒太大差別 this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then(function(response){
                    console.log(response)
            }).catch(function(error){
                console.log(error)

            })
        }
    }
}
</script>

使用的時候，因為本質上來說，我們還是原來的axios，所以也會收到同源策略的影響。

八.路由的使用

　　路由：把組件和對應的 uri地址進行一一映射的關系。

　　1.安裝(進入項目個目錄)

npm install vue-router

　　2.創建路由文件

路由文件可以直接創建在src目錄下，但是如果項目大了， 分成多個不同的大平台或者大的子項目，可以選擇分目錄保存路由，

　　src/router/index.js // 前台路由

　　src/router/backend.js // 后台路由

　　3,編寫路由文件

import Vue from "vue"
import Router from "vue-router"

// import Home from "../components/Home"

// @ 表示src的目錄路徑
import Home from "@/components/Home"
import HelloWorld from "@/components/HelloWorld"

// 讓Vue啟用Router路由
Vue.use(Router)

export default new Router({
  // 聲明項目的路由列表
  routes:[
    {
      path:"/",              // 用於訪問的路徑地址
      name:"HelloWorld",    // 在組件視圖中，以后生成url地址時使用的別名，一般和組件名保持一致，方便維護
      component: HelloWorld, // 這不是字符串，是導入的組件對象
    },{
      path:"/home",              // 用於訪問的路徑地址
      name:"Home",    // 在組件視圖中，以后生成url地址時使用的別名，一般和組件名保持一致，方便維護
      component: Home, // 這不是字符串，是導入的組件對象
    },
  ]
});

　　4.index.js路由信息要被main.js加載,所以需要在src/main.js中導入路由對象

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'  //前端導包,import包里面聲明的對象, from 路徑,從node_modules導
import App from './App'  //相對路徑,從當前文件夾到包,執行路徑,從當前目錄導包
import axios from 'axios'; // 從node_modules目錄中導入包
import router from './router/index';
//不啟用生產環境下的配置信息
Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.prototype.$axios = axios; // 把對象掛載vue中

new Vue({
  el: '#app',
 router, //在vue啟動默認組件,如果要調用多個組件則需要以英文逗號分開
  components: { App },
  template: '<App/>'
})

　　5.在main.js中的Vue對象中注冊了路由以后,那么直接在App.vue文件中的html代碼里面,顯示當前uri路徑對應的組件內容.

　　實現生成站內連接.可以使用vue-router提供的路由標簽也可以使用vue-router提供的this.$router

　　通過鏈接可以切換路由標簽里面對應的組件，鏈接的地址是上面index.js文件中定義的path值，不過鏈接標簽是"router-link",鏈接地址用'to'來定義：

<router-link to="/">站點首頁</router-link>
<router-link to="/num">AddNum</router-link>

　　鏈接地址中可以傳遞參數，格式如下

// name對應的是路由中定義的一個path對應的name屬性
    <router-link :to='{name:"UpDate",params:{code:item.code}}'>

　　有時候需要在組件的js中跳轉頁面，也就是改變路由，改變路由有下面這些方式：

// 當前頁面重新加載
this.$router.go('/user');

// 跳轉到另外一個路由
this.$router.push({path:'/user'});

// 獲取當前的路由地址
var sPath = this.$route.path;

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 自動化工具構建vue項目 vue-cli 自動化測試 Nightwatch 詳解常用自動化工具對比前端自動化工具plopjs 運維自動化工具 Cobbler sql自動化優化工具 vue-cli 自動切換環境腳手架vue-cli系列二：vue-cli的工程模板與構建工具 vue （vue-cli主要寫構建工具的使用）前端自動化工具 -- Grunt 使用簡介

Vue自動化工具（Vue-CLI）

一.組件的概念

1.概念

2.默認組件(全局組件)

二.vue-cli的安裝

1.為什么要安裝使用vue-cli

2.安裝過程

1.nvm工具的下載和安裝：https://www.jianshu.com/p/d0e0935b150a

2.安裝nodejs

3.安裝vue-cli

三. vue-cli初始化創建項目

1.生成項目目錄

2.項目的目錄結構

3. 項目執行流程圖

四.單文件組件的使用

1.概念

2.創建文件

3.編寫文件

1.template編寫html代碼的地方

2.script編寫vue.js的地方

3.style編寫當前組件樣式代碼,記得style標簽要記得加scoped表示局部的

4.在App.vue組件中調用上面的組件

五.組件的嵌套

有時候開發vue項目時,頁面也可以算是一個大組件,同時頁面也可以分成多個子組件. 因為,產生了父組件調用子組件的情況. 1.我們可以聲明一個組件home.vue,作為父組件

2.在HomeSon目錄下,可以創建當前頁面的子組件,例如,是Menu.vue

3.然后，在父組件中調用上面聲明的子組件

4.在app.vue調用父組件

六.數據傳遞

1.在父組件調用子組件的組名處,使用屬性值的方式向子組件傳遞數據

2.在子組件中接受上面父組件傳遞的數據，需要在vm組件對象中，使用props屬性類接受。

3.在子組件中的template中使用父組件傳遞過來的數據

七.在組件中使用axios

1. 在項目根目錄中使用 npm安裝包

2. 接着在main.js文件中，導入axios並把axios對象 掛載到vue屬性中多為一個子對象，這樣我們才能在組件中使用。

3.在組件中使用

八.路由的使用

1.安裝(進入項目個目錄)

2.創建路由文件

3,編寫路由文件

4.index.js路由信息要被main.js加載,所以需要在src/main.js中導入路由對象

5.在main.js中的Vue對象中注冊了路由以后,那么直接在App.vue文件中的html代碼里面,顯示當前uri路徑對應的組件內容.

免責聲明！

　　1.概念

　　2.默認組件(全局組件)

　　1.為什么要安裝使用vue-cli

　　2.安裝過程

　　1.nvm工具的下載和安裝：https://www.jianshu.com/p/d0e0935b150a

　　　　2.安裝nodejs

　　　　3.安裝vue-cli

　　1.生成項目目錄

　　2.項目的目錄結構

　　3. 項目執行流程圖

　　1.概念

　　2.創建文件

　　3.編寫文件

　　　　1.template編寫html代碼的地方

　　　　2.script編寫vue.js的地方

　　　　3.style編寫當前組件樣式代碼,記得style標簽要記得加scoped表示局部的

　　4.在App.vue組件中調用上面的組件

　　　有時候開發vue項目時,頁面也可以算是一個大組件,同時頁面也可以分成多個子組件. 　　　因為,產生了父組件調用子組件的情況.
　　　
　　1.我們可以聲明一個組件home.vue,作為父組件

　　　　2.在HomeSon目錄下,可以創建當前頁面的子組件,例如,是Menu.vue

　　3.然后，在父組件中調用上面聲明的子組件

　　4.在app.vue調用父組件

　　　1.在父組件調用子組件的組名處,使用屬性值的方式向子組件傳遞數據

　　2.在子組件中接受上面父組件傳遞的數據，需要在vm組件對象中，使用props屬性類接受。

　　3.在子組件中的template中使用父組件傳遞過來的數據

　　1. 在項目根目錄中使用 npm安裝包

　　2. 接着在main.js文件中，導入axios並把axios對象掛載到vue屬性中多為一個子對象，這樣我們才能在組件中使用。

　　3.在組件中使用

　　1.安裝(進入項目個目錄)

　　2.創建路由文件

　　3,編寫路由文件

　　4.index.js路由信息要被main.js加載,所以需要在src/main.js中導入路由對象

　　5.在main.js中的Vue對象中注冊了路由以后,那么直接在App.vue文件中的html代碼里面,顯示當前uri路徑對應的組件內容.