Vue腳手架的簡單使用實(shí)例

更新時間：2018年07月10日 14:37:21 作者：promise橙

這篇文章主要介紹了Vue腳手架的簡單使用實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

提前申明

注意：自己對vue腳手架的理解和認(rèn)識，很多東西和理解都是形象上的手法，并不專業(yè)和官方

webpack

一種項(xiàng)目構(gòu)建工具，可以將css和js壓縮成一個文件。此外，可以提供測試用服務(wù)器。使用webpack時，可以配置一些默認(rèn)擴(kuò)展名和路徑別名來在項(xiàng)目文件里直接使用

導(dǎo)入和導(dǎo)出

使用export命令可以將一個JS對象導(dǎo)出，其他JS文件可以使用import 對象名 from 路徑的形式導(dǎo)入這個對象來使用，但是在導(dǎo)入時，必須知道導(dǎo)入導(dǎo)出對象的名字。如果使用export default命令導(dǎo)出對象的話，其他JS文件在導(dǎo)入時就無需知道導(dǎo)出對象的名字，可以自定義對象名

ps：export和import為es6規(guī)范中的關(guān)鍵字，目前僅被少量JS運(yùn)行平臺實(shí)現(xiàn)，在腳手架里會被自動用babel轉(zhuǎn)換成es5對應(yīng)

語法組件中自定義標(biāo)簽名的大小寫問題

在大多數(shù)瀏覽器解析HTML時，不區(qū)分標(biāo)簽的大小寫。自定義標(biāo)簽中的大寫字母會被自動轉(zhuǎn)換為小寫字母，如<First></First>會被轉(zhuǎn)換為 first 標(biāo)簽，因此導(dǎo)致與注冊時提供的標(biāo)簽名不一致，出現(xiàn)組件未正確注冊的錯誤。

如果使用自定義組件時，代碼寫在template標(biāo)簽里，在解析時就會被當(dāng)做JS解析，是區(qū)分大小寫的。

組件的另外一種寫法

<body>

<template id="first-c">
  <!--template以下才是組件的HTML模板，仍然只能有一個根標(biāo)簽-->
  <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>

使用腳手架創(chuàng)建項(xiàng)目安裝NodeJS

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

下載NodeJS

配置npm全局路徑

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
之后將第一個路徑同時配置到環(huán)境變量path中。

配置淘寶npm鏡像

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

安裝vue-cli

在命令行中執(zhí)行npm install -g vue-cli。

創(chuàng)建模板項(xiàng)目

//vue init 模板名 項(xiàng)目名

vue init webpack simple

模板名可以在 https://github.com/vuejs-templates查看，推薦使用webpack。

之后使用cd 項(xiàng)目名進(jìn)入項(xiàng)目根目錄，使用npm install來自動安裝項(xiàng)目依賴。

其他常用命令

項(xiàng)目根目錄下執(zhí)行npm run dev可以測試運(yùn)行項(xiàng)目，執(zhí)行npm run build可以正式編譯項(xiàng)目到dist目錄下。

目錄結(jié)構(gòu)

單文件組件

<template>
  <!--template以下才是組件的HTML模板，仍然只能有一個根標(biāo)簽-->
  <div>
    我是一個單文件組件
  </div>
</template>

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

<!--這個scoped可以讓這些樣式僅在當(dāng)前組件生效-->
<style scoped>

</style>

補(bǔ)充：在Vue腳手架中使用jquery和其他框架

在項(xiàng)目根目錄安裝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的組件中導(dǎo)入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>

使用其他js框架的方法鏈接

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: