vue boilerplate template下載 - vue boilerplate template原始碼下載

vue boilerplate template

其他類別

vue-boilerplate-template V2.0.0

下載

Vue 樣板模板

?(vue webpack vuex vue-router vue-i18n element-ui) 開箱即用

？用於建立 Medium Plus Vue.js(2.*) 專案的漂亮樣板模板

中文維基百科

目標與理念

對於如何建造中型（+） VUE項目，根據以往的經驗提供一些參考。基於vue-cli3最新Vue Boilerplate已經開源：awesome-vue-cli3-example，如果你關註一下，相信是非常值得的？

先決條件

Node.js（>=4.x、8.x 首選）、Npm 版本 4+（首選 Yarn）和 Git。

示範

線上演示頁面

優勢

基於vue-cli構建，對於如何方便vue的使用進行更多的優化。
已經包含了許多常用的函式庫，像是vue-i18n , axios , lodash ...
附有一些關於Vue經驗文章，如：如何寫一手漂亮的Vue。並且還在更新中。
對如何使用WebPack建立應用程式進行更多最佳化。
- Webpack 預留優化體積篇
- Webpack 資源優化速度篇
- 使用 webpack 優化您的庫
- Webpack 不錯的教程

用法

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

前往 http://localhost:8080/。如果連接埠 8080 已在您的電腦上使用，程式將為您指定可用連接埠（增量），例如8081 / 8082 ... 。當然，您可以使用以下命令暫時替換連接埠：

 PORT=8888 npm run dev

補充補充：您需要確保PORT是您的機器上可以執行的命令。

更多指令

 npm run build

相當於執行node build.js ，啟動一個建置專案。

 npm run build:dll

等效執行webpack --config build/webpack.dll.conf.js ，更多資訊請見 webpack.DllPlugin 。

 npm run jarvis / yarn run jarvis

執行 webpack-jarvis(一個非常聰明的基於瀏覽器的 Webpack 儀表板)，在瀏覽器中開啟： localhost:1337 ，你就擁有了。

npm run pretest

使用nodejs搭建本機伺服器： http://localhost:3000/ ，對打包後的程式碼做簡單的預測試。

 npm run analyz

Webpack 外掛程式和 CLI 實用程式將捆綁包內容表示為方便的互動式可縮放樹狀圖。它會自動開啟這個位址：http://localhost:8888/ 。

依賴插件列表

vue2
vue-路由器
視圖
vue-i18n
軸
引導程式
元素UI
洛達什
片刻戴傑斯
js-cookie
……

操作請求

你的後端可以傳回以下格式的數據，那就更好了。

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

在前端，你可以這樣處理請求：

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

這麼貼心，Template已經幫助統一處理請求了，所以你可以這麼好用，當然你可以在helper/ajax.js檔案中根據需要更改你自己的。