Get Started
- 使用@vue/cli搭建項(xiàng)目
- vue.js 與 vue.runtime.js
- SEO(搜索引擎優(yōu)化)
1. 使用@vue/cli搭建項(xiàng)目
命令行工具@vue/cli 是 Vue 提供了一個(gè)官方的 CLI粪滤，為單頁(yè)面應(yīng)用 快速搭建繁雜的腳手架入热。
按照官網(wǎng)給出的方法插佛，先下載@vue/cli。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
然后選擇創(chuàng)建項(xiàng)目的路徑，使用vue create 項(xiàng)目名稱(chēng)，勾選所需特性，@vue/cli就會(huì)自己創(chuàng)建好這個(gè)項(xiàng)目文件剥扣。
使用vue --version檢查其版本是否正確。
運(yùn)行yarn serve開(kāi)啟webpack-dev-server铝穷。
2. vue.js 與 vue.runtime.js
vue.js 與 vue.runtime.js 是Vue的兩個(gè)不同的版本钠怯。
2.1 vue.js
vue.js 是vue完整版，是同時(shí)包含編譯器和運(yùn)行時(shí)的版本曙聂。
運(yùn)行時(shí)：用來(lái)創(chuàng)建Vue實(shí)例晦炊、渲染并處理虛擬DOM等的代碼。基本上就是除去編譯器的其它一切断国。
編譯器：用來(lái)將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼贤姆。
- 在頁(yè)面上從 CDN 包 引入vue.js或vue.min.js。
- 也可以通過(guò)import引用vue.js或者vue.min.js稳衬。
- 引入后生成一個(gè)全局變量Vue救可以使用Vue實(shí)例了
完整版可以直接從html文件中獲取html元素霞捡，例如將html中的{{n}}變成1可以這么寫(xiě)。也可以使用template薄疚，將html變成字符串寫(xiě)入碧信。
<!-- index.html -->
<div id="app">
{{n}}
</div>
/* main.js */
new Vue({
el:'#app',
data: {
n:0
}
})
或者
new Vue({
data() {
return {
n: 0,
}
},
template: `
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
`,
methods: {
add() {
this.n += 1
},
},
}).$mount("#akane")
2.1 vue.runtime.js
vue.runtime.js 是運(yùn)行時(shí)版本，沒(méi)有編譯器街夭，使體積比完整版小大約30%砰碴。使用vue-cli創(chuàng)建的目錄默認(rèn)會(huì)使用這個(gè)vue.runtime.js。
這種方式不能直接從HTML頁(yè)面里面獲取數(shù)據(jù)板丽，需要使用 render 函數(shù)呈枉。但是當(dāng)頁(yè)面變復(fù)雜的時(shí)候，就會(huì)很麻煩檐什，因此，webpack 提供了 vue-loader 弱卡，將*.vue 文件內(nèi)部的模板會(huì)在構(gòu)建時(shí)預(yù)編譯成 JavaScript乃正。你在最終打好的包里實(shí)際上是不需要編譯器的，所以只用運(yùn)行時(shí)版本即可婶博。
// demo.vue
<template>
<div class="red">
{{ n }}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
data(){ // 若使用vue-loader這里只支持函數(shù)
return {
n:0
}
},
methods:{
add(){
this.n++
}
}
}
</script>
<style scoped>
.red{
color: red;
}
</style>
vue-loader 會(huì)把這個(gè)demo.vue文件變成一個(gè)對(duì)象瓮具，使用render函數(shù)渲染這個(gè)對(duì)象即可。這種形式也叫vue單文件組件凡人。
new Vue({
el:'#app',
render(h) {
return h(demo)
},
})
但是這種方式是js渲染的頁(yè)面名党，所以會(huì)引起SEO不友好的問(wèn)題。
3.SEO(搜索引擎優(yōu)化)
SEO（Search Engine Optimization）：搜索引擎優(yōu)化挠轴。是一種方式：利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名传睹。
本質(zhì)是搜索引擎不停的 curl 一個(gè)頁(yè)面，然后根據(jù) curl 的內(nèi)容去分析頁(yè)面內(nèi)容岸晦。（標(biāo)題欧啤、描述、關(guān)鍵字之類(lèi)的）
優(yōu)化的方式：
- 把title启上、description邢隧、keyword、h1冈在、a 寫(xiě)好即可
- 原則:讓curl能得到頁(yè)面的信息倒慧，SEO就能正常工作
- 怎么讓網(wǎng)頁(yè)到第一名?瀏覽的人足夠多即可
4.使用 codesandbox.io
這是一個(gè)可以在線創(chuàng)建前端項(xiàng)目的網(wǎng)站
https://codesandbox.io/
進(jìn)入官網(wǎng)點(diǎn)擊相應(yīng)的框架圖標(biāo)即可創(chuàng)建項(xiàng)目，無(wú)需登錄，可重復(fù)創(chuàng)建項(xiàng)目纫谅，也可以下載到本地炫贤。
