有小夥伴問我,如何把寫好的vue網頁放到伺服器上,那我就在這裡講解一下,主要的命令就是要用到npm run build 命令。我們在命令列中輸入npm run build命令後,vue-cli會自動進行專案發布打包。你在package.json檔案的scripts欄位中可以看出,你執行的npm run build命令就相對執行的 node build/build.js 。
package.json的scripts 字段:
1
2
3
4
"scripts":,
在執行完npm run build命令後,在你的專案根目錄生成了dist資料夾,這個資料夾裡邊就是我們要傳到伺服器上的檔案。
dist資料夾下目錄包括:
main.js是整個專案的入口檔案,在src資料夾下:
1
2
3
4
5
6
7
8
9
10
11
12
13
import vue from'vue'
import router from'./router'
vue.config.productiontip=false//生產環境提示,這裡設定成了false
/* eslint-disable no-new */
newvue()
12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
12
3
4
5
6
7
8
9
10
11
12
13
14
15
import vue from'vue'
import router from'vue-router'
import hello from'@/components/hello'
vue.use(router)
exportdefaultnewrouter(
]
})
我們可以看到 import hello from 『@/components/hello』這句話, 檔案引入了/components/hello.vue檔案。這個檔案裡就配置了乙個路由,就是當我們訪問**時給我們顯示hello.vue的內容。
五、hello.vue檔案解讀:
這個檔案就是我們在第一節課看到的頁面檔案了。也是分為
vue cli專案模板的一些思考
之前有個想法,就是要利用vue寫一套ui。然後當時也沒有搞清楚到底怎麼寫。幾經周轉吧,通過付費的方式在gitbook上面找到了答案。找到答案之後再看我們正在開發的專案,看夥伴寫的 突然發現完全可以按照寫ui元件庫的方式調整目錄結構。於是動手了,於是新的目錄結構。最重要的是終於從實際層面開始向上思考 ...
模板模式解讀
模板設計模式,是通過把不變的行為移動到超類,從而去除子類中的重複 來體現他的優勢。模板方法實際上就是提供了乙個很好的 復用平台。在很多的程式中,的邏輯都是通過不同步驟來實現的,在整個 邏輯中,整體的步驟框架是不變的,而變化的就是各個步驟裡面的具體實現步驟,這樣的情況下,就可以將不變的步驟放到父類作為...
vue cli提供的幾種手架模板
1.webpack 模板 readme.md index.html package.json src assets logo.png main.js webpack.config.js webpack 只配置了babel和vue的編譯器,其他的一無所有。這個模板值得一提的就是src目錄,所有的vue...