Vue鷹架的簡單使用

這篇文章主要介紹了關於Vue鷹架的簡單使用，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

提前申明

注意：自己對vue腳手架的理解和認識，很多東西和理解都是形像上的手法，並不專業和官方

webpack

一種項目構建工具，可以將css和js壓縮成一個文件。此外，可以提供測試用伺服器。使用webpack時，可以設定一些預設副檔名 和路徑別名 來在專案檔案裡直接使用

#匯入和匯出

#使用export指令可以將一個JS物件匯出，其他JS檔案可以使用import 物件名稱from 路徑的形式匯入這個物件來使用，但是在匯入時，必須知道匯入匯出物件的名字。如果使用export default指令匯出物件的話，其他JS檔案在匯入時就不需要知道匯出物件的名字，可以自訂物件名稱

ps：export和import為es6規範中的關鍵字，目前僅被少量JS運行平台實現，在腳手架裡會被自動用babel轉換成es5對應語法

組件中自訂標籤名的大小寫問題

在大多數瀏覽器解析HTML時，不區分標籤的大小寫。自訂標籤中的大寫字母會被自動轉換為小寫字母，例如<first></first>會轉換為first 標籤，因此導致與註冊時提供的標籤名稱不一致，出現組件未正確註冊的錯誤。

如果使用自訂元件時，程式碼寫在template標籤裡，在解析時就會被當做JS解析，是區分大小寫的。

元件的另一個寫法

---

<template>
    <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
    <p>这是我第一个组件</p>
</template>
<p>
    <first></first>
</p>
<script>
    var myTemplate = {
        template:"#first-c"
    }

    Vue.component("first",myTemplate);
    var app = new Vue({
        el:"#app"
    });
</script>

使用鷹架建立專案

安裝NodeJS

腳手架的安裝及運行均依賴NodeJS，可以在命令列鍵入node -v來查看是否安裝NodeJS。

下載NodeJS

設定npm全域路徑

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
之後將第一個路徑同時配置到環境變數path。

設定淘寶npm鏡像

npm config set registry https://registry.npm.taobao.org

##安裝vue-cli

在命令列中執行

npm install -g vue-cli。

建立範本專案

//vue init 模板名 项目名

vue init webpack simple

範本名稱可以在 https://github.com/vuejs-temp... 查看，建議使用webpack。

之後使用

cd 專案名稱進入專案根目錄，使用npm install來自動安裝專案相依性。

其他常用指令

專案根目錄下執行

npm run dev可以測試執行項目，執行npm run build可以正式編譯專案到dist目錄下。

目錄結構

單一檔案元件

<template>
    <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
    <p>
        我是一个单文件组件
    </p>
</template>

<script>
export default {
    //无需写template，data仍然以函数返回，其他属性照旧
    data(){
        return {
        }
    },
    props:[],
    methods:{
    }
}
</script>

<!--这个scoped可以让这些样式仅在当前组件生效-->
<style>

</style>

補充：在Vue鷹架中使用jquery和其他框架

#在專案根目錄安裝jquery

npm install jquery（注意大小寫，jquery和jQuery不一樣）。

build目錄下的webpack.base.conf.js 開頭加入

const webpack = require("webpack")

module.exports的最後加入（注意JS程式碼格式，不要忘了寫逗號）

plugins: [
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
]

之後，需要使用jquery的元件中導入juuery，如

<script>
    import $ from &#39;jquery&#39;
    export default{
        data(){
            return {
                users:null
            }
        },
        created(){
            $.get("http://127.0.0.1:3000/all_user",function(data){
                this.users = data;
            }.bind(this))
        }
    }
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

Vue原始碼之檔案結構與執行機制

#ES6 Promise中then與catch的回傳值的實例

以上是Vue鷹架的簡單使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！