很多時候搭建好了環境,但是不知道怎么入手去開發。
下面我們通過簡單案例說明如何快速入門開發模塊:
例1:開發helloworld模塊
搭建好環境,新建項目以后,進入項目所在文件夾,依次進入src/components,這里存放我們頁面模板,進入src/router,編輯index.js,找到path: ‘/’, 這里是路徑也就是url訪問的顯示,當前默認的是根目錄,也就是首頁訪問才會出現helloworld模塊的內容,將path改為path: ‘/HelloWorld’,通過url訪問
http://www.xiangmu.com:8082/#/helloworld,出現了我們想要的結果。如圖1:
圖2 helloworld 效果圖
開發步驟:
- 在src/components新建頁面模板;
- 編輯src/router內index.js ,
1)導入 import HelloWorld from ‘@/components/HelloWorld’
2)注冊
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
}
注意首字母大寫,駝峰法命名;
例2:新聞列表
圖2 文章列表效果圖
News.vue代碼:
<template>
<div class="main">
<h1>{{msg}}</h1>
<div >
<ul>
<li v-for="(item,index) in list" :key="index"><router-link :to="{path: 'newsdetail', query: {id: item.id}}"> {{item.news_name}}</router-link></li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'news',
data () {
return {
artid: 19,
msg: '這是新聞列表',
list: [
{'news_name': '新聞標題1', id: 1},
{'news_name': '新聞標題2', id: 2},
{'news_name': '新聞標題3', id: 3}
]
}
},
mounted () {
var that = this
axios
.post('/api/newslist', {
parid: that.artid
})
.then(function (response) {
that.list = response.data.list
})
}
}
</script>
編輯src/router/index.js
第一步:導入 News
import News from '@/components/News'
第二步:注冊 注意:path 就是我們網址訪問的地址
{
path: '/news',
name: 'news',
component: News
}
path和name是否首字母大寫沒有關系,完全可以直接復制粘貼News,這樣就不必改變首字母大寫了。
在文章列表點擊需要傳遞ID編號到詳情頁,
router-link用法:
<li v-for="(item,index) in list" :key="index">
<router-link :to="{path: 'newsdetail', query: {id: item.id}}">
{{item.news_name}}</router-link>
</li>
如何傳遞多個參數呢?
query: {id: item.id, catid: cat}
詳情頁獲取參數:this.$route.query.id
mounted () {
var id = this.$route.query.id
var that = this
that.artid = id
axios
.post('/api/newsdetail', {
parid: that.artid
})
.then(function (response) {
that.content = response.data.content
})
}
圖3 文章詳情頁效果圖
如何去掉router-link下劃線:
直接設置a css樣式 a{text-decoration:none}
如何使用公共的頭部和底部文件:
打開src下app.vue
<template>
<div id="app">
<Header></Header>
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
name: 'App',
components: {
Header, Footer
}
}
</script>
template內添加 <Footer></Footer><Header></Header>,然后下邊import導入,components注冊,components文件夾內新建header.vue,footer.vue。
頭部代碼:
<template>
<div class='header'>
<div class='logo'><img :src="logo"></div>
<div class='dh'>
<dl>
<dd><router-link to="/">首頁</router-link></dd>
<dd><router-link to="/news">新聞中心</router-link></dd>
<dd><router-link to="/about">公司簡介</router-link></dd>
<dd><router-link to="/contact">聯系我們</router-link></dd>
</dl>
</div>
</div>
</template>
<script>
export default {
name: 'header',
data: () => ({
logo: '/static/img/logo.png'
})
}
</script>
打包導出:
使用npm run build命令打包,打開項目文件夾發現多了dist文件夾,復制該文件夾到我們的tp6網站根目錄下(dist名稱可以任意修改,比如手機網站是m或者mobile等),這個時候如果網址直接訪問該文件夾,頁面是空白的。
首頁空白的解決方法:
編輯index.html發現css和js的路徑是指向根目錄的,我是把static放到了根目錄下,直接暴力解決了,沒有去修改路徑。再次訪問首頁,已經正常,頁面如下圖。
圖4 demo首頁
tp6用來寫接口(用于和html頁面的交互):
返回文章列表示例:
public function newslist()
{
$list=Db::name("web_news")->field('id,news_name')->select()->toArray();
exit(json_encode(array('list'=>$list),JSON_UNESCAPED_UNICODE));
}
使用域名重定向:
打開項目內config>index.js。vue默認的網址是localhost,端口是8080,我們可以改變為自己好記的網址,例如:www.xiangmu.com,打開C:WindowsSystem32driversetchosts,結尾處添加127.0.0.1 www.xiangmu.com,這樣我們就可以使用網址加端口訪問我們的vue網站,端口號在我們運行項目的時候會提示項目的訪問網址。
這里說一個小技巧:直接打開項目所在文件夾,在地址欄點擊直接輸入cmd,相比運行,打開cmd,然后cd進入目錄會方便點。
基本的規范
很多的警告,并不影響我們使用,但是也不建議忽視,只有嚴格按照要求來寫代碼,才能使我們的程序更加規范。
- 變量為字符串需要使用單引號,提示錯誤:Strings must use singlequote;
- 變量值和前邊冒號之間應該有一個空格,提示:Missing space before value for key;
- 換行的時候,不能出現2個或者更多空白行,提示:More than 1 blank line not allowed;
- 空格數錯誤,提示:Expected indentation of 7 spaces but found 8;
- 文件名不要使用下劃線,例如news_detail,提示:Identifier ‘News_Detail’ is not in camel case;
- 如果在index.js或者main.js導入axios, 會提示:’axios’ is defined but never used,我們直接在用到的頁面導入就可以了,而不要在index 或者main.js導入;
- components內.vue文件寫法應該是<template><div class=’header’>并列的div</div></template>,如果沒有總得div包含會提示:Component template should contain exactly one root element;
- 表達式兩邊要留出空格,例如:that.newslist = response.data.newslist,如果不留出來會提示:Infix operators must be spaced;
很多的時候都是出現了應該有空格,我們沒有加上,按照提示加上空格就可以,越是按照要求寫代碼,我們的代碼就會越規范。
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。