vue創建項目必須步驟


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
      }
    ]
  ]
}

 


免責聲明!

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



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