點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:11:39

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

Vue腳手架的簡(jiǎn)單使用實(shí)例:提前申明注意：自己對(duì)vue腳手架的理解和認(rèn)識(shí)，很多東西和理解都是形象上的手法，并不專業(yè)和官方 webpack 一種項(xiàng)目構(gòu)建工具，可以將css和js壓縮成一個(gè)文件。此外，可以提供測(cè)試用服務(wù)器。使用webpack時(shí)，可以配置一些默認(rèn)擴(kuò)展名和路徑別名來(lái)在項(xiàng)目文件里

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue腳手架的簡(jiǎn)單使用實(shí)例:提前申明注意：自己對(duì)vue腳手架的理解和認(rèn)識(shí)，很多東西和理解都是形象上的手法，并不專業(yè)和官方 webpack 一種項(xiàng)目構(gòu)建工具，可以將css和js壓縮成一個(gè)文件。此外，可以提供測(cè)試用服務(wù)器。使用webpack時(shí)，可以配置一些默認(rèn)擴(kuò)展名和路徑別名來(lái)在項(xiàng)目文件里

提前申明

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

webpack

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

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

使用export命令可以將一個(gè)JS對(duì)象導(dǎo)出，其他JS文件可以使用import 對(duì)象名 from 路徑的形式導(dǎo)入這個(gè)對(duì)象來(lái)使用，但是在導(dǎo)入時(shí)，必須知道導(dǎo)入導(dǎo)出對(duì)象的名字。如果使用export default命令導(dǎo)出對(duì)象的話，其他JS文件在導(dǎo)入時(shí)就無(wú)需知道導(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)

語(yǔ)法組件中自定義標(biāo)簽名的大小寫(xiě)問(wèn)題

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

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

組件的另外一種寫(xiě)法

<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來(lái)查看是否安裝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來(lái)自動(dòng)安裝項(xiàng)目依賴。

其他常用命令

項(xiàng)目根目錄下執(zhí)行npm run dev可以測(cè)試運(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 {
 //無(wú)需寫(xiě)template，data仍然以函數(shù)返回，其他屬性照舊
 data(){
 return {
 }
 },
 props:[],
 methods:{
 }
}
</script>

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

</style>

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

在項(xiàng)目根目錄安裝jquery npm install jquery（注意大小寫(xiě)，jquery和jQuery不一樣）。

build目錄下的webpack.base.conf.js

開(kāi)頭加入

const webpack = require("webpack")

module.exports的最后加入（注意JS代碼格式，不要忘了寫(xiě)逗號(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框架的方法鏈接

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE 案例實(shí)例

熱門(mén)焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門(mén)推薦