基於Vue2 搭建移動端 webapp 框架


Vue.js2.0作為國內熱門並廣為人知的前端框架,其與其他主流框架的優勢在此不做過多贅述。搭建框架步驟如下:

轉自;http://www.jianshu.com/p/beae26e57b0f

安裝Node.js

搭建框架需要使用最新穩定版Node.js,請選擇LTS版本。

tip1:如果本機有其它項目需要早期版本,建議利用NVM在本機分別部署多個版本的Node,以便在使用本框架時切換至最新穩定版即可。

tip2:無法翻牆的童鞋,建議使用cnpm,安裝后在以下命令中將npm 替換成cnpm即可;

安裝Git

運用vue-cli

本框架利用vue-cli腳手架快速搭建基礎框架;

安裝vue-cli
npm install -g vue-cli
使用webpack模板
vue init webpack my-project

本文示例運行於vue-cli(v2.8.1),命令行提示如下:

? Project name (my-project)                   //請輸入項目名稱,回車默認 ? Project description (A Vue.js project)  //請輸入項目描述,回車默認 ? Author xsl <398818817@qq.com>  //請輸入作者名,回車默認 ? Vue build  //請選擇構建模式,請直接回車選擇第一條 > Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-router? Yes  //是否安裝vue-router,回車 ? Use ESLint to lint your code? Yes  //是否安裝ESLint代碼檢查器,回車 //個人比較偏愛airbnb的編碼規范,此處選擇第二項 Standard (https://github.com/feross/standard) >AirBNB (https://github.com/airbnb/javascript) none (configure it yourself) ? Setup unit tests with Karma + Mocha? Yes  //單元測試,請按需選擇 ? Setup e2e tests with Nightwatch? Yes  //端到端測試,請按需選擇

如果對於eslint報錯並不明白的,可以參考eslint官方文檔提供ESLint代碼檢查規則索引;

安裝vendor

本框架中需要利用vue-router作為前端路由,如果與本示例相同版本vue-cli,無需單獨引入,在初始化時直接選擇安裝即可;

本框架中需要運用Vuex作為公用狀態管理,這基於業務功能的復雜度,可選用,引入方式如下;

//請進入工程文檔目錄中運行以下命令 npm install vuex --save

本框架是運用於搭建移動端APP,選用餓了么移動端UI庫——mint UI

//請進入工程文檔目錄中運行以下命令 npm install mint-ui --save
部分框架提升
ES6+新特性支持

由於webpack模板里的babel默認只選用了ES2015以及stage-2,對於需要使用其它ES新特性來說,所以我們可能需要添加新的依賴,並修改babel配置;

npm install babel-preset-es2016 -D npm install babel-preset-es2017 -D npm install babel-preset-stage0 -D

.babelrc修改presets屬性如下

"presets": [["es2015",{ "modules": false }], "es2016", "es2017", "stage-0", "stage-2"]],

按需引入

安裝babel-plugin-component

npm install babel-plugin-component -D

.babelrc修改plugins屬性如下

"plugins":"plugins": ["transform-runtime",["component", [ { "libraryName": "mint-ui", "style": true } ]]],

這樣我們就不必在需要在組件內單獨引用mint UI樣式。

webpack

我們選用的打包工具為webpack,正如你看到我們選用的是webpack的模板,雖然大量通用性配置已經配好,即使你不了解它並不會對使用框架產生影響,但作者還是建議你去了解他,特別是作者獨家提供了中文版webpack2新手指南


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM