快捷導(dǎo)航

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

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

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

提前申明

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

webpack

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

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

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

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

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

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

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

組件的另外一種寫法

<body>

<template id="first-c">
  <!--template以下才是組件的HTML模板，仍然只能有一個(gè)根標(biāo)簽-->
  <div>這是我第一個(gè)組件</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"
之后將第一個(gè)路徑同時(shí)配置到環(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來自動(dòng)安裝項(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模板，仍然只能有一個(gè)根標(biāo)簽-->
  <div>
    我是一個(gè)單文件組件
  </div>
</template>

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

<!--這個(gè)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代碼格式，不要忘了寫逗號(hào)）

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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: