一 解讀Vue cli的模板

2021-08-18 14:06:08 字數 1803 閱讀 1783

有小夥伴問我,如何把寫好的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...