1. 程式人生 > >餓了麽vue-cli3.0+cube-ui筆記

餓了麽vue-cli3.0+cube-ui筆記

vue-cli lin 直接 fig 們的 dex browser stc size

1、目錄結構

技術分享圖片

模板文件是public裏的index.html,運行項目的時候,會引用src/main.js(入口文件)

詳細文檔在這裏:https://cli.vuejs.org/zh/config/#pwa

public:放著html模板和靜態資源,public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。在構建過程中,資源鏈接會被自動註入。

.browserslistrc 指定瀏覽器版本。不同的瀏覽器會有兼容性問題,比如css,我們會給它們加上前綴,這個文件是為postcss的Autoprefixer 插件使用的

postcss.config.js 裏的autoprefixer就是依據.browserslistrc文件加前綴

.eslintrc.js eslint的相關配置

babel.config.js 預設

package.json 各種依賴

package-lock.json 鎖版本 管理版本的文件

cube-ui插件

https://github.com/didi/cube-ui

後編譯:就是我們做項目的時候使用的是 源代碼,只有打包運行後,才會進行編譯。好處是節省構建包的體積,做完項目後,可以把不用的引入刪掉,這樣打包的時候,就指揮

打包那些我們使用的模塊

在vue-cli3.0的項目裏,直接使用vue add cube-ui 就可以安裝

是否使用後編譯

技術分享圖片

是用部分引入還是全部引入,上面的選擇是部分引入

技術分享圖片

自定義主題是否需要(選擇是,因為我們的項目的顏色一般都與插件的不一樣)

技術分享圖片

安裝完以後,下面是修改和添加的文件

技術分享圖片

cube-ui.js 管理cube-ui模塊的引入

theme.styl 管理cube-ui的顏色(修改顏色可以在這裏面進行修改)

技術分享圖片

表示可以直接引入cube-ui的源碼

vue.config.js 類似以前的webpack.js文件,進行一些配置

餓了麽vue-cli3.0+cube-ui筆記