[FE] 有效開展一個前端項目2 (vuejs-templates/webpack)

 

1.安裝 nodejs、npm

$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install -y nodejs  # 10版本的node已包含有npm，因此不須要另外執行 apt-get install -y npm

( 以上是經過 package manager 方式安裝的，詳細查看官網 https://nodejs.org/en/download/ )

( https://github.com/nodesource/distributions/blob/master/README.md )

注：若是是在其餘 docker 鏡像中集成 node 環境，Dockerfile 局部參照以下，

　　USER root

　　RUN apt-get update && apt-get install -y gnupg

　　RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -

　　RUN apt-get update && apt-get install -y nodejs

　　相關項目：phvia/dkc

 

2.安裝 webpack、vue-cli

$ npm install -g webpack && npm install -g vue-cli

注意：新版本 vue cli 3 使用 npm install -g @vue/cli，不建議使用 vue-cli 了

 

3.安裝模板項目

 

https://github.com/vuejs-templates/webpack

http://vuejs-templates.github.io/webpack

$ vue init webpack my-project
$ cd my-project
$ npm install && npm start

 

文檔摘要：

 

　　處理靜態資源（ http://vuejs-templates.github.io/webpack/static.html）

• src/assets/ 與 static/  的區別

　　　　由 webpack 處理的靜態資源放在 src/ ，在其它源文件旁邊。實際上也不須要都放在 src/assets 中，能夠放在每一個組件的目錄中。 

• 資源解析規則

　　　　相對路徑 url，如 ./assets/logo.png，將被自動替換爲基於 webpack 輸出路徑配置的 url。

 

　　　　沒有前綴的 url，如 assets/logo.png，會和相對路徑url同樣對待。

 

　　　　~ 前綴的 url，被視爲一個模塊的請求，與 require('some-module/image.png’) 類似。

 

　　　　根 url，如 /assets/logo.png，將不被處理。

　　

　　針對SEO作預渲染（http://vuejs-templates.github.io/webpack/prerender.html）

 

4.vuejs、vuex、vue-router 等組件用法

 

vuejs@doc  https://cn.vuejs.org/v2/guide/

 

vuex@doc  https://router.vuejs.org/zh/

 

vue-router@doc  https://vuex.vuejs.org/guide

 

 

5.安裝瀏覽器擴展 - 調試工具 vue-devtools

 

vue-devtools@doc  https://github.com/vuejs/vue-devtools

 

 

完成上面5步，基本能夠展開一個現代化前端項目了。若是想讓使用和理解上更深刻一些，對 webpack、vuejs 的研究也必不可少。

 

[FE] 有效開展一個前端項目1 (gulp/angular)

[FE] 有效開展一個前端項目2 (vuejs-templates/webpack)

[FE] 有效開展一個前端項目3 (Vue CLI / Vue SSR )

 

Link： http://www.javashuo.com/article/p-bsonuwnr-bu.html