使用vue cl2 x快速構建應用

2021-09-26 05:28:52 字數 1452 閱讀 2435

我們以webpack為例,輸入:

vue init webpack myproject
myproject 專案名字自己取,接下來是安裝流程:

project name (myproject) 括號中是預設選項,你可以修改也可以直接回車確認

project description (a vue.js project)專案描述,也可以直接回車跳過

author (***xx) 作者名稱

runtime + compiler: recommended for most users 執行加編譯(推薦選項)

runtime-only: about 6kb lighter min+gzip, but templates (or any vue-specifichtml) are only allowed in .vue files - render functions are required elsewhere 僅執行時

選擇執行時編譯的原因,可以翻回官網文件: 執行時-編譯器-vs-只包含執行時

install vue-router? (y/n) 是否安裝vue-route,建議選擇y,vue路由大多情況下都會使用上,特別是構建單頁面應用的時候。

use eslint to lint your code? (y/n) 是否使用eslint來管理你的**風格,建議選擇y,養成良好的**風格很重要,至於選擇哪種風格因人而異(standard,airbnb,none),我一般使用standard標準。

setup unit tests with karma + mocha? (y/n) 是否安裝單元測試,y

setup e2e tests with nightwatch?(y/n)是否安裝e2e測試,y

安裝完成,接下來按照提示所說的指令輸入,即可完成構建。

進入我的專案

cd myproject
安裝所有的依賴模組,這個過程相當漫長,因為npm是國外伺服器,我們可以選擇使用國內npm映象資源,例如**的,參考文章:

npm install
構建完成後,我們可以去run一下,看一下執行後的效果:

npm run dev版, browserify完整版簡易版,pwa漸進式web框架和單純的vue配置模板:
現在我們就可以進行專案開發啦,開發過程中頁面會實時進行渲染更新。

當我們需要打包專案的時候,可以輸入:

npm run build
打包完成後,目錄中會生成乙個dist資料夾,這個就是我們最後的專案輸出成品啦。

實際上,在部署的時候要注意,假設靜態伺服器的網域名稱是 ,那麼對應到訪問 《專案根目錄》/dist/index.html 的 url 一定要是 /index.html ,其他的靜態資源以此類推。

Vue2 x 快速入門例項專案

本專案是在使用vue cli生成的腳手架程式基礎上,綜合運用vue的各項特性開發的乙個快速入門例項專案。install vue cli npm install g vue cli init project vue init webpack my project entry into the file...

vue router2 x使用入門

測試一 測試二在vue router2.x中使用about 測試一 測試二在vue devtools中可檢視到所有的某個路由的所有資訊 路由的重定向需要我們在路由檔案中配置 注意 從圖中看出,雖然路由發生了跳轉,但是後面跟的引數並沒有發生變化。引數含義 注意的點 在我寫demo的時候發現,如果你在乙...

奇技淫巧 快速求log2 x

很多倍增的板子都需要算log,比如說lca,rmq,等等 其實我只知道這兩個倍增,唉太菜了 然後計算log有乙個math的標頭檔案,裡面的log函式就是求出log10 x 於是求log2 x 就相當於log x log 2 但是這樣算很容易出玄學bug,因為算出來可能是取整 取整,然後就炸了 然後可...