文章目錄
- 一,練習vue路由
- --1,代碼
- --2,總結
- 二,Vue-cli腳手架
- --1,概述
- --2,安裝
- 1, 安裝Nodejs(下一步下一步), 并檢查(在DOS視窗里執行DOS命令 node -v)
- 2, 修改npm的鏡像(下載的快) :
- 3, 正式安裝(沒有飄紅ERR就行了):
- 4, 下載vue專案
- 5,檢測vue專案是否下載完了
- 6，測驗專案
- 7,用Hbuilder打開Vue專案
- 三,在Vue專案中添加自定義組件
- --1,創建Car.vue檔案-自定義組件
- --2,修改App.vue檔案
- --3,測驗
- 四,練習自定義組件
- --1,創建person.vue的組件
- --2,修改App.vue,引入自定義組件
- --3,測驗
- 五,ElementUI
- --1,概述
- --2,使用步驟
- --3,修改main.js,引入elementui
- --4,測驗,修改自定義組件person.vue/car.vue
一,練習vue路由
–1,代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習vue路由</title>
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
</head>
<body>
<!-- 需求:點擊不同的元素,展示不同的網址 -->
<div id="app">
<router-link to="/runoob">runoob</router-link>
<router-link to="/w3c">w3c</router-link>
<router-view></router-view>
</div>
<script>
let router = new VueRouter({
routes:[ //把不同的請求,分發給不同的組件處理
{ //點擊runoob時,匹配到對應的組件,展示runoob的網址
path:'/runoob',
component:{
template:'<h1><a href="https://www.runoob.com">https://www.runoob.com/</a></h1>',
},
},
{ //點擊w3c時,匹配到對應的組件,展示w3c的網址
path:'/w3c',
component:{
template:'<h1><a href="https://www.w3school.com.cn">https://www.w3school.com.cn/</a></h1>',
},
}
]
})
new Vue({
el:"#app",
router
})
</script>
</body>
</html>
–2,總結
二,Vue-cli腳手架
–1,概述
是指vue的客戶端,是使用vue專案的前提.
vue腳手架提供了豐富的功能,只要安裝成功,就可以使用的.
–2,安裝
1, 安裝Nodejs(下一步下一步), 并檢查(在DOS視窗里執行DOS命令 node -v)
2, 修改npm的鏡像(下載的快) :
npm config set registry https://registry.npm.taobao.org #修改下載資源的網址成taobao
3, 正式安裝(沒有飄紅ERR就行了):
npm install vue-cli -g #全域安裝vue腳手架
vue –V #查看腳手架的版本
where vue #查看vue腳手架安裝在哪里
4, 下載vue專案
指定一個作業空間的路徑,存放vue專案的代碼
在作業空間的位置,輸入cmd,敲入回車,輸入以下命令:
vue init webpack jt01 #利用腳手架下載jt01的專案100M+
進行一些選項的配置,yes/no,參考下圖選答案.
5,檢測vue專案是否下載完了
原則是: 一路沒有遇到飄紅的ERR的話,就可以了
6，測驗專案
按照提示,再執行兩條命令:
cd jt08 #進入專案檔案夾里
npm run dev #啟動專案
DONE Compiled successfully in 9949ms #表示專案啟動成功
打開瀏覽器訪問:http://localhost:8080
7,用Hbuilder打開Vue專案
檔案–打開目錄–選中剛剛下載好的vue專案–確定
三,在Vue專案中添加自定義組件
–1,創建Car.vue檔案-自定義組件
位置:在src/components檔案夾里
<!-- 寫HTML的代碼 -->
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<!-- 寫js的代碼 -->
<script>
// 提供一個支持匯出的組件
export default{
name:'Car' ,//組件名稱,通常和檔案名一致
data(){ //準備回傳資料
return{
msg:'hello vue~~'
}
}
}
</script>
<!-- 寫css的代碼 -->
<style>
</style>
–2,修改App.vue檔案
把自定義組件,引入到這個檔案里
<template>
<div id="app">
<!-- 3.使用自定義組件,當做HTML元素-->
<Car></Car>
</div>
</template>
<script>
//1.匯入指定位置的自定組件car.vue
import Car from './components/Car.vue'
//2,使用components屬性,使用自定義組件
export default {
name: 'App',
components:{
Car //注冊剛付訓入的自定義組件
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
–3,測驗
1,服務器保證是啟動的,編譯了新的代碼
2,在瀏覽器里http://localhost:8080/測驗
四,練習自定義組件
–1,創建person.vue的組件
<template>
<div>{{name}}</div>
</template>
<script>
export default{
name:'person',
data(){
return{
name:'jack'
}
}
}
</script>
<style>
</style>
–2,修改App.vue,引入自定義組件
<template>
<div id="app">
<!-- 3.使用自定義組件,當做HTML元素-->
<Car></Car>
<person></person>
</div>
</template>
<script>
//1.匯入指定位置的自定組件car.vue
import Car from './components/Car.vue'
import person from './components/person.vue'
//2,使用components屬性,使用自定義組件
export default {
name: 'App',
components:{
Car , //注冊剛付訓入的自定義組件
person
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
–3,測驗
1,在DOS視窗敲個回車(目的是自動編譯新的代碼)
2,打開瀏覽器,重繪看新資料http://localhost:8080
五,ElementUI
–1,概述
是餓了么提供的一套漂亮的前端網頁展示的效果
–2,使用步驟
1, 在當前工程里,下載element-ui的工具
npm i element-ui -S #安裝element-ui
2, 檢查下載的結果
–3,修改main.js,引入elementui
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入第三方的ElementUI來美化頁面
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
–4,測驗,修改自定義組件person.vue/car.vue
<!-- 寫HTML的代碼 -->
<template>
<div>
<h1>{{msg}}</h1>
<!-- 1.按鈕 -->
<el-button type="success">成功按鈕</el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
<!-- 2.布局,每行默認是24分格,自由組合
:span屬性表示合并列,el-row表示行元素,el-col表示列元素
-->
<el-row>
<el-col :span="2">123</el-col>
<el-col :span="12">456</el-col>
</el-row>
<!-- 3.圖示,i表示圖示網頁的元素,class屬性指定要用哪個圖示-->
<i class="el-icon-share"></i>
<i class="el-icon-s-flag"></i>
<!-- 4.按鈕,el-button按鈕效果,type設定顏色,circle圓形,icon給按鈕加圖示-->
<el-button type="success" round icon="el-icon-search">立即注冊</el-button>
<el-button type="success" circle icon="el-icon-delete"></el-button>
</div>
</template>
<!-- 寫js的代碼 -->
<script>
// 提供一個支持匯出的組件
export default{
name:'Car' , //組件名稱,通常和檔案名一致
data(){ //準備回傳資料
return{
msg:'hello vue~~'
}
}
}
</script>
<!-- 寫css的代碼 -->
<style>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325612.html
標籤：其他