Vue腳手架的簡單使用

時間 2019-11-09

標籤 vue 腳手架簡單使用简体版

原文原文鏈接

提早申明

注意：本身對vue腳手架的理解和認識，不少東西和理解都是形象上的手法，並不專業和官方css

webpack

一種項目構建工具，能夠將css和js壓縮成一個文件。此外，能夠提供測試用服務器。使用webpack時，能夠配置一些默認擴展名 和 路徑別名 來在項目文件裏直接使用vue

導入和導出

使用export命令能夠將一個JS對象導出，其餘JS文件可使用import 對象名 from 路徑的形式導入這個對象來使用，可是在導入時，必須知道導入導出對象的名字。若是使用export default命令導出對象的話，其餘JS文件在導入時就無需知道導出對象的名字，能夠自定義對象名node

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

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

在大多數瀏覽器解析HTML時，不區分標籤的大小寫。自定義標籤中的大寫字母會被自動轉換爲小寫字母，如<First></First>會被轉換爲 first 標籤，所以致使與註冊時提供的標籤名不一致，出現組件未正確註冊的錯誤。jquery

若是使用自定義組件時，代碼寫在template標籤裏，在解析時就會被當作JS解析，是區分大小寫的。webpack

組件的另一種寫法

<body>
    <template id="first-c">
        <!--template如下才是組件的HTML模板，仍然只能有一個根標籤-->
        <div>這是我第一個組件</div>
    </template>
    <div id="app">
        <first></first>
    </div>
    <script>
        var myTemplate = {
            template:"#first-c"
        }

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

使用腳手架建立項目

安裝NodeJS

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

下載NodeJSes6

配置npm全局路徑

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

配置淘寶npm鏡像

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

安裝vue-cli

在命令行中執行npm install -g vue-cli。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模板，仍然只能有一個根標籤-->
    <div>
        我是一個單文件組件
    </div>
</template>

<script>
export default {
    //無需寫template，data仍然以函數返回，其餘屬性照舊
    data(){
        return {
        }
    },
    props:[],
    methods:{
    }
}
</script>

<!--這個scoped可讓這些樣式僅在當前組件生效-->
<style scoped>

</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 'jquery'
    export default{
        data(){
            return {
                users:null
            }
        },
        created(){
            $.get("http://127.0.0.1:3000/all_user",function(data){
                this.users = data;
            }.bind(this))
        }
    }
</script>