最近在重構乙個vue專案，恨自己當初第一次學的時候沒有寫部落格。現在翻以前自己做的紙質版筆記，不能看，太混亂。所以趁這個時間總結一下。
vue是元件化的開發。乙個頁面中，是乙個元件，他也是由多個元件構成的。
第乙個問題，專案中怎麼引入頁面？
使用v-cli自動搭建腳手架，他已經給我們配好了路由，還做好了乙個helloworld的介面。
那麼這個介面是怎麼被引用到的？
首先我們知道，專案中main.js是整個專案的入口
import vue from 'vue'
import router from './router'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue({
router,
template: ''
可以看到就在這裡它建立了乙個根元件，然後根元件引入了
router：路由
等等export default {
這裡也沒有樣式。但是我們看到了蹊蹺！。路由匹配到的元件將渲染在這裡。
我們再看路由router資料夾下的index.js。這個是專案的路由檔案
import vue from 'vue'
import router from 'vue-router'
import homea from '@/pages/home/home.vue'
vue.use(router)
export default new router({
routes: [
path: '/',
name: 'homeg',
component: homea
所以我們的頁面是放在這裡讓使用者可以訪問到他。
解釋一下：
homeg就是我們元件的對外出口姓名
homea就是我們從路徑下引入的姓名
第二個問題：頁面中的小組件是怎樣放進頁面並使用的呢？
1.了解目錄結構
.png
pages資料夾存放我們這個專案所有的頁面
home資料夾存放home頁面的元件
home.vue是home頁
components資料夾存放組成home頁的小組件
例子：把swiper.vue放入home.vue
1.每乙個元件都有乙個「出口名字」(在外面引用這個元件就會用他這個名字)
export default {
name: 'swiper',
2.home.vue
①script標籤中引入這個元件
import swiper from './components/swiper'
②在home.vue註冊這個元件
export default {
components:{
swiper
③就可以在home中使用了,像div標籤那樣使用了
vue 安裝並建立vue專案
2,npm包管理器，是整合在node中的，所以安裝了node也就有了npm,直接輸入 npm v 命令，顯示npm的版本資訊。3,安裝vue cli,執行下面的命令 npm install g vue cli cnpm i g vue cli 安裝結束之後,可以使用vue v 檢視 vue 的版本 ...
VUE 建立元件並且引用
本文以 choosingcity.vue 元件為示例 1.建立元件 如圖，在common 中建立了choosingcity.vue 元件 2.在router 資料夾下的index.js 配置該元件 import choosingcity from components common choosing...
Vue專案中父子元件通訊
在 vue cli 構建的專案中實現父子元件通訊 核心點1.設定元件的 ref 屬性 2.父元件給子元件傳值 使用 valuename 子元件 使用 props valuename 接收 直接使用 3.子元件呼叫父元件的方法 需要在元件上 新增 methedname 需要呼叫的方法名 子元件使用 t...