vue init webpack 項目名 cd 項目名 npm install npm run dev 安裝幾個依賴 npm install stylus -save npm install stylus-loader -save npm install less less-loader --save-dev npm install css-loader style-loader --save-dev npm install axios --save npm install animate.css npm install vuex --save npm install --save screenfull npm install --save jquery npm install --save ali-oss symbol引用 這是一種全新的使用方式,應該說這才是未來的主流,也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合,與上面兩種相比具有如下特點: 支持多色圖標了,不再受單色限制。 通過一些技巧,支持像字體那樣,通過font-size,color來調整樣式。 兼容性較差,支持 ie9+,及現代瀏覽器。 瀏覽器渲染svg的性能一般,還不如png。 使用步驟如下: 第一步:拷貝項目下面生成的symbol代碼: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js 第二步:加入通用css代碼(引入一次就行): <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 第三步:挑選相應圖標並獲取類名,應用於頁面: <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> 創建weex步驟 weex create awesome-project npm start npm i weex-ui@latest -S npm i babel-plugin-component babel-preset-stage-0 -D npm i babel-plugin-component babel-plugin-component 修改.babelrc如下: { "presets": ["es2015", "stage-0"], "plugins": [ [ "component", { "libraryName": "weex-ui", "libDir": "packages", "style": false } ] ] }