成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue腳手架的簡單使用

Genng / 3057人閱讀

摘要：提前申明注意自己對(duì)腳手架的理解和認(rèn)識(shí)，很多東西和理解都是形象上的手法，并不專業(yè)和官方一種項(xiàng)目構(gòu)建工具，可以將和壓縮成一個(gè)文件。之后使用項(xiàng)目名進(jìn)入項(xiàng)目根目錄，使用來自動(dòng)安裝項(xiàng)目依賴。

提前申明

注意：自己對(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)換為小寫字母，如會(huì)被轉(zhuǎn)換為 first 標(biāo)簽，因此導(dǎo)致與注冊時(shí)提供的標(biāo)簽名不一致，出現(xiàn)組件未正確注冊的錯(cuò)誤。

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

組件的另外一種寫法
使用腳手架創(chuàng)建項(xiàng)目 安裝NodeJS

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

下載NodeJS

配置npm全局路徑

npm config set prefix "D: odejs ode_global"
npm config set cache "D: odejs ode_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-temp... 查看，推薦使用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)

單文件組件
補(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，如

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96022.html

相關(guān)文章

  • 簡單vue項(xiàng)目腳手架

    摘要：簡單項(xiàng)目腳手架地址使用技術(shù)棧需要學(xué)習(xí)的知識(shí)內(nèi)容相當(dāng)多，尤其是教程，官方腳手架雖然相當(dāng)完整齊全，但是修改起來還是挺花時(shí)間，于是自己參照網(wǎng)上的資料和之前做過的項(xiàng)目用到的構(gòu)建工具地去寫了一個(gè)簡單項(xiàng)目腳手架。 簡單vue項(xiàng)目腳手架 github地址 使用技術(shù)棧 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1...

    opengps 評(píng)論0 收藏0

  • 記一次基于vue的spa多頁簽實(shí)踐經(jīng)驗(yàn)

    摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對(duì)具體的實(shí)現(xiàn)方法有興趣，歡迎點(diǎn)擊本文結(jié)尾的鏈接，去我的倉庫上查看。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁,具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實(shí)現(xiàn)多頁簽,并且可以通過瀏...

    ispring 評(píng)論0 收藏0

  • 記一次基于vue的spa多頁簽實(shí)踐經(jīng)驗(yàn)

    摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對(duì)具體的實(shí)現(xiàn)方法有興趣，歡迎點(diǎn)擊本文結(jié)尾的鏈接，去我的倉庫上查看。 前言 最近收到一個(gè)這樣的需求,要求做一個(gè)基于 vue 和 element-ui 的通用后臺(tái)框架頁,具體要求如下: 要求通用性高,需要在后期四十多個(gè)子項(xiàng)目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝 要求實(shí)現(xiàn)多頁簽,并且可以通過瀏...

    張遷 評(píng)論0 收藏0

  • Vue運(yùn)行時(shí)全解析 - VueCLI3上手（一）

    摘要：可以譯作運(yùn)行時(shí)過程全面分析和解析，這個(gè)全面分析涉及到比較基礎(chǔ)的或者復(fù)雜的重要前端概念和中的概念等。注本篇是運(yùn)行時(shí)全解析系列文章的第一篇，首次發(fā)表于，友善轉(zhuǎn)載蟹蟹。附更多內(nèi)容請(qǐng)參考核心維護(hù)者蔣豪群同學(xué)的的公開課視頻 Vue Runtime Full Analysis - VueCLI3 Get Start VRFA: (Vue Runtime Full Analysis) 可以譯作vue...

    molyzzx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<