溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
提前申明
注意：自己對vue腳手架的理解和認識，很多東西和理解都是形象上的手法，并不專業和官方
webpack
一種項目構建工具，可以將css和js壓縮成一個文件。此外，可以提供測試用服務器。使用webpack時，可以配置一些默認擴展名 和 路徑別名 來在項目文件里直接使用
導入和導出
使用export命令可以將一個JS對象導出，其他JS文件可以使用import 對象名 from 路徑的形式導入這個對象來使用，但是在導入時，必須知道導入導出對象的名字。如果使用export default命令導出對象的話，其他JS文件在導入時就無需知道導出對象的名字，可以自定義對象名
ps：export和import為es6規范中的關鍵字，目前僅被少量JS運行平臺實現，在腳手架里會被自動用babel轉換成es5對應
語法組件中自定義標簽名的大小寫問題
在大多數瀏覽器解析HTML時，不區分標簽的大小寫。自定義標簽中的大寫字母會被自動轉換為小寫字母，如<First></First>會被轉換為 first 標簽，因此導致與注冊時提供的標簽名不一致，出現組件未正確注冊的錯誤。
如果使用自定義組件時，代碼寫在template標簽里，在解析時就會被當做JS解析，是區分大小寫的。
組件的另外一種寫法
<body>
<template id="first-c">
<!--template以下才是組件的HTML模板，仍然只能有一個根標簽-->
<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>
使用腳手架創建項目安裝NodeJS
腳手架的安裝及運行均依賴NodeJS，可以在命令行鍵入node -v來查看是否安裝NodeJS。
下載NodeJS
配置npm全局路徑
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
之后將第一個路徑同時配置到環境變量path中。
配置淘寶npm鏡像
npm config set registry https://registry.npm.taobao.org
安裝vue-cli
在命令行中執行npm install -g vue-cli。
創建模板項目
//vue init 模板名 項目名 vue init webpack simple
模板名可以在 https://github.com/vuejs-templates查看，推薦使用webpack。
之后使用cd 項目名進入項目根目錄，使用npm install來自動安裝項目依賴。
其他常用命令
項目根目錄下執行npm run dev可以測試運行項目，執行npm run build可以正式編譯項目到dist目錄下。
目錄結構
單文件組件
<template>
<!--template以下才是組件的HTML模板，仍然只能有一個根標簽-->
<div>
我是一個單文件組件
</div>
</template>
<script>
export default {
//無需寫template，data仍然以函數返回，其他屬性照舊
data(){
return {
}
},
props:[],
methods:{
}
}
</script>
<!--這個scoped可以讓這些樣式僅在當前組件生效-->
<style scoped>
</style>
補充：在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的組件中導入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框架的方法鏈接
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
