您好,登錄后才能下訂單哦!
提前申明
注意:自己對vue腳手架的理解和認(rèn)識,很多東西和理解都是形象上的手法,并不專業(yè)和官方
webpack
一種項目構(gòu)建工具,可以將css和js壓縮成一個文件。此外,可以提供測試用服務(wù)器。使用webpack時,可以配置一些默認(rèn)擴(kuò)展名 和 路徑別名 來在項目文件里直接使用
導(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運行平臺實現(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)建項目安裝NodeJS
腳手架的安裝及運行均依賴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)建模板項目
//vue init 模板名 項目名 vue init webpack simple
模板名可以在 https://github.com/vuejs-templates查看,推薦使用webpack。
之后使用cd 項目名
進(jìn)入項目根目錄,使用npm install
來自動安裝項目依賴。
其他常用命令
項目根目錄下執(zhí)行npm run dev
可以測試運行項目,執(zhí)行npm run build
可以正式編譯項目到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和其他框架
在項目根目錄安裝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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。