wordpress帶用戶丁的老頭seo博客
一、簡(jiǎn)介與安裝
1 簡(jiǎn)介
Vue Cli 全稱Vue command line interface(Vue命令行接口)，俗稱Vue腳手架， 是Vue官方提供的一個(gè)標(biāo)準(zhǔn)化開發(fā)工具(開發(fā)平臺(tái))。 可以幫助我們快速創(chuàng)建一個(gè)開發(fā)Vue項(xiàng)目的標(biāo)準(zhǔn)化基礎(chǔ)架子?！炯闪藈ebpack配置】
參考官網(wǎng)：Vue CLI
最新版本是4.x，目前處于維護(hù)模式
其優(yōu)點(diǎn)
1. 開箱即用，零配置 2. 內(nèi)置babel等工具 3. 標(biāo)準(zhǔn)化的webpack配置
2 安裝腳手架
第一步：驗(yàn)證npm指令是否存在
如果不存在，需要安裝nodejs軟件 ? 官網(wǎng)：https://nodejs.org/en
第二步：更換鏡像
npm config set registry https://registry.npmmirror.com ? or ? npm config set registry htps://registry.npm.taobao.org
擴(kuò)展：
查看是否更換成功 ： npm config get registry
刪除最新鏡像： npm config delete registry
第三步：安裝腳手架(全局安裝，只需要安裝一次)
npm install -g @vue/cli ? # OR ? yarn global add @vue/cli
第四步：測(cè)試是否安裝成功，檢查一下版本號(hào)
vue -V 或者 vue --version
二、Vue項(xiàng)目創(chuàng)建與解析
1 如何創(chuàng)建Vue項(xiàng)目
第一步: 選擇項(xiàng)目要?jiǎng)?chuàng)建的位置
比如在D:盤的一個(gè)文件夾projects里，那么cmd當(dāng)前位置，需要切入該文件夾里
?
?第二步：創(chuàng)建項(xiàng)目，想好自己的項(xiàng)目名稱，比如first_vue
?
第三步: 按照提示來
錯(cuò)誤總結(jié)
第一個(gè)：java_home
?
第二個(gè)：Error: spawn yarn ENOENT
打開 C盤 ， 在 C盤 里，打開 users （用戶名）的文件夾，然后在右側(cè)搜索名為 .vuerc 的文件
{"useTaobaoRegistry": false,"packageManager": "npm"
}
2 項(xiàng)目相關(guān)指令
啟動(dòng)項(xiàng)目：npm run serve 暫停項(xiàng)目：Ctril+C
3 腳手架組織結(jié)構(gòu)解析
腳手架文件結(jié)構(gòu)：
.文件目錄 ├── node_modules: ?vue庫文件以及第三方庫文件 ├── public │ ? ├── favicon.ico: 頁簽圖標(biāo) │ ? └── index.html: 主頁面 ├── src │ ? ├── assets: 存放靜態(tài)資源 │ ? │ ? └── logo.png │ ? │── components: 存放組件 │ ? │ ? └── HelloWorld.vue │ ? │── App.vue: 匯總所有組件 │ ? └── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ，可以自行參考babel官網(wǎng) ├── package-lock.json: 包版本控制文件 ├── package.json: 應(yīng)用包配置文件 └── README.md: 應(yīng)用描述文件
三、入門案例
src/components/School1.vue
<template><ul class="schoolUl"><li>學(xué)校名稱：{{schoolName1}}</li><ul><li>學(xué)校地址：{{schoolAddress1}}</li></ul></ul>
</template>
?
<script>export default {name:"School1",data(){return {schoolName1:"吉林大學(xué)",schoolAddress1:"高新區(qū)前進(jìn)大街2699號(hào)"}}}
</script>
?
<style>.schoolUl{list-style-type:lower-alpha;}
</style>
src/components/School2.vue:
<template><ul class="schoolUl"><li>學(xué)校名稱：{{schoolName2}}</li><ul><li>學(xué)校地址：{{schoolAddress2}}</li></ul></ul>
</template><script>export default {name:"School2",data(){return {schoolName2:"北京大學(xué)",schoolAddress2:"海淀區(qū)頤和園路5號(hào)"}}}
</script><style>.schoolUl{list-style-type:lower-alpha;}
</style>
src\components\City.vue:
?
<template>
? <ul>
? ? <li>{{cityName1}}
? ? ? ?<School1></School1>
? ? </li>
? ? <li>{{cityName2}}
? ? ? ?<School2></School2>
? ? </li>
? </ul>
</template><script>
import School1 from './School1.vue'
import School2 from './School2.vue';
export default {
? ? name:"City",
? ? data(){
? ? ? ? return {
? ? ? ? ? ? cityName1:"長(zhǎng)春市",
? ? ? ? ? ? cityName2:"北京市"
? ? ? ? }
? ? },
? ? components:{
? ? ? ? ?School1,
? ? ? ? ?School2
? ? }
}
</script><style>
</style>
src/App.vue
<template><div id="app"><City></City></div>
</template>
?
<script>
import City from './components/City.vue'
?
export default {name: 'App',components: {City}
}
</script>
?
<style>
</style>
src/main.js:
/*該文件是整個(gè)項(xiàng)目的入口文件
*/
// 引入Vue
import Vue from 'vue'
//引入App組件，他是所有組件的父組件
import App from './App.vue'
?
//關(guān)閉vue的生產(chǎn)提示
//Vue.config.productionTip = false
?
new Vue({// 簡(jiǎn)寫形式 ? ? 將App組件放入容器中render: h => h(App),// 完整形式// render(createElement){// ? ? return createElement(App)// }}).$mount('#app')
public/index.html:
<!DOCTYPE html> <html lang=""><head><meta charset="UTF-8"><!-- 針對(duì)IE瀏覽器的特殊配置，含義是讓IE瀏覽器以最高渲染級(jí)別渲染頁面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 開啟移動(dòng)端的理想端口 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置頁簽圖標(biāo) --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 配置網(wǎng)頁標(biāo)題 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 當(dāng)瀏覽器不支持js時(shí)，里面的元素內(nèi)容就被渲染 --> ?<noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScriptenabled. Please enable it to continue.</strong></noscript><!-- 容器 --><div id="app"></div></body> </html> ?
小貼士：常用快捷鍵：控制臺(tái)打開的快捷鍵： ctrl+`?
四、render函數(shù)
按照以前的寫法，我們應(yīng)該這樣寫:
import Vue from 'vue'
import App from './App.vue'
?
Vue.config.productionTip = false
?
new Vue({el:"#app"template: `<App></App>`
});
但是會(huì)報(bào)如下錯(cuò)誤：
因?yàn)関ue項(xiàng)目，默認(rèn)引用的是node_modules\vue\dist\vue.runtime.esm.js，在node_modules\vue\package.json中明晃晃的寫著：模塊化語法時(shí)，引用的是該js ?
vue.js 與 vue.runtime.xxx.js的區(qū)別：
1. vue.js 是完整版的 Vue，包含：核心功能+模板解析器 2. vue.runtime.xxx.js 是運(yùn)行版的 Vue，只包含核心功能，沒有模板解析器
因?yàn)?vue.runtime.xxx.js 沒有模板解析器，所以不能使用 template 配置項(xiàng)，需要使用 render函數(shù)接收到的createElement 函數(shù)去指定具體內(nèi)容
render(a){//console.log(typeof a) // Function, 該函數(shù)就是用來創(chuàng)建DOM節(jié)點(diǎn)的return a('h1','你好，歡迎來到我的家');
}
//簡(jiǎn)寫：
render:h => h(h1)
自己定義一個(gè)用于創(chuàng)建節(jié)點(diǎn)的函數(shù)，你應(yīng)該會(huì)這么定義：
function createNode(nodeName,content){var node = document.createElement(nodeName);var txt = document.createTextNode(content)node.appendChild(txt)return node;
}
五、配置文件
vue.config.js 是一個(gè)可選的配置文件，如果項(xiàng)目的（和package.json 同級(jí)的）根目錄中存在這個(gè)文件，那么它會(huì)被 @vue/cli-service 自動(dòng)加載
使用vue.config.js 可以對(duì)腳手架進(jìn)行個(gè)性化定制，詳見配置?參考官網(wǎng)：配置參考 | Vue CLI
module.exports = {pages: {index: {// 入口entry: 'src/index/main.js'}},// 關(guān)閉語法檢查lintOnSave:false
}