摘要:后續會改成的版本安裝安裝編譯語法使用編譯語法圖片路徑與打包安裝引入圖片需要依賴的加載器樣式引入打包文件編譯打包引入樣式文件編譯
vue2.x-cnode 關于項目
vue2.x Cnode社區是基于vue、vue-router、vuex、axios、es6開發,使用webpack構建工具編譯打包項目
如果此開源項目對大家學習vue的全家桶有幫助,請給我一個star,因為你的star讓我覺得這個開源有了價值!
點擊查看效果
vue1.x 項目基于vue1.x已上線積分購項目
下載 && 啟動# 克隆項目 git clone https://github.com/vincentSea/vue2.x-Cnode.git # 安裝依賴 npm install # 啟動開發環境 npm run dev # 打包項目 npm run build項目目錄
│ .babelrc // ES6語法編譯配置 │ .gitignore // git的文件過濾配置 │ index.tpl // 程序入口html模板 │ package.json // 項目相關信息配置,通過執行 npm init 命令創建 │ README.md // 項目說明 │ ├─build // webpack配置項 │ ├─src // 項目主文件夾 │ │ App.vue // 頁面入口文件 │ │ main.js // 程序入口文件,加載各種公共組件 │ │ │ ├─assets // 靜態資源,圖片、公用樣式、插件 │ ├─components // 公共組件 │ ├─fetch // 請求api │ ├─pages // 頁面組件 │ ├─router // 頁面路由配置 | |─util // 公用方法 (過濾器、彈窗) │ └─vuex // vuex的狀態管理 │ └─static源碼地址 webpack 配置
本項目是參考vue-cli快速構建項目,自己搭建項目。后續會改成webpack2.x的版本
安裝babel# 安裝babel,編譯ES6語法 cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2
// 使用babel,編譯ES6語法 { test: /.js$/, loader: "babel?presets=es2015", exclude: /node_modules/ }圖片路徑與打包
# 安裝引入圖片需要依賴url-loader的加載器 cnpm install --save-dev url-loader
{ test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: "url", query: { limit: 10000, name: "[name].[hash:7].[ext]" } }樣式引入打包 scss文件編譯
cnpm install --save-dev css-loader sass-loader cssnext-loader cnpm install --save-dev node-sass
// 打包引入樣式 { test: /.css$/, loader: "css-loader?sourceMap!cssnext-loader" }, // scss文件編譯 { test: /.scss$/, loader: "css-loader?sourceMap!sass-loader!cssnext-loader" }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/81636.html
摘要:引言兩個月前用全家桶實現過一次酷狗音樂,最近又用全家桶重構了下,最終成果和的實現基本一致,放個圖手機預覽戳版本版本。的行為結構表現分離,很明顯,而的分離雖然不是很明顯,但實際上也是有的。發送指令,最終會到里合并數據,與中的類似。 引言 兩個月前用 Vue 全家桶實現過一次 酷狗音樂,最近又用 React 全家桶重構了下,最終成果和 Vue的實現基本一致,放個圖: showImg(htt...
摘要:庫用了魔改樣式的歌詞滾動部分用了黃軼老大的賊爽主題換膚用的變量替換。語言的下一代標準預處理器安裝與使用前端項目后端項目 音樂播放器雖然爛大街了,但是作為前端沒自己擼一個一直是個遺憾,而且偶然間發現pc端web版的網易云音樂做的實在是太簡陋了,社區仿pc客戶端的網易云也不多見,為了彌補這個遺憾,就用vue全家桶模仿mac客戶端的ui實現了一個,歡迎提出意見和star~ 預覽地址 源碼地址...
摘要:社區項目地址點此查看預覽地址點此查看使用模擬手機查看基于全家桶的風格社區盡量接近原生的風格,參考了,的客戶端。 vue-md-cnode社區 項目地址:點此查看預覽地址:點此查看(使用chrome模擬手機查看) 基于vue全家桶的Material Design風格Cnode社區 盡量接近原生App的Material Design風格,參考了Google Play,Cnode的Andr...
摘要:全家桶實現一個小的移動商城學習了一段時間的臨近過年了。購物車數據使用進行管理一個新手項目希望對你所幫助最后給個小星星支持下吧 vue全家桶實現一個小的移動商城 學習了一段時間的react,臨近過年了。想到年后要換工作,就想把之前的vue再看看,畢竟現在版本迭代快。正好又趕上vue-cli 3.0 beta的到來,就順便上手試試吧。完成一個移動小商城的demo,是個新手項目。 倉庫地址 ...
閱讀 1049·2021-09-13 10:29
閱讀 3396·2019-08-29 18:31
閱讀 2642·2019-08-29 11:15
閱讀 3020·2019-08-26 13:25
閱讀 1377·2019-08-26 12:00
閱讀 2314·2019-08-26 11:41
閱讀 3412·2019-08-26 10:31
閱讀 1493·2019-08-26 10:25