Vue奇淫技巧

Vue開發技巧

一、轉發 請求
config -- index.js -- module.exports -- dev -- proxyTable

proxyTable: {
  '/api':{
    target:'http://0.0.0.0:8080',
    pathRewrite: {
      '^/api':'/static/mock'
    }
  }
},

二、設置路徑別名
build -- webpack.base.conf.js
module.exports -- resolve --a>lias

'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles'), // 本身配置

在main.js直接 styles，其餘地方須要加波浪線 ‘ ~ ’

三、打包上層目錄要求

config/index.js/build
--assetsPublicPath: '/', //運行在 根 目錄下
assetsPublicPath: '/projects', //運行在projects目錄下

四、.vue文件在webstorm中es6語法報錯解決方法

一、安裝Vue插件
File --> Settings --> Plugins ，點擊Browse repositories，在瀏覽存儲庫中搜索
搜索vue，點擊 Install 進行安裝，安裝以後點擊 Restart WebStorm 重啓

二、新建Vue模板
File --> Settings --> Editor --> File and Code Templates，選擇 VUE File ，右測編輯默認模板內容
若是 Files 下沒有vue file選項，需本身手動添加

三、語法支持es6設置
 (1).Settings --> Language & Frameworks --> JavaScript --> Javascript Language version，選擇 ECMAScript 6
這樣作全部的.js文件中es6再也不報錯，可是在.vue文件中es6語法依然報錯。
 (2).打開 Editor => File Types 找到 HTML 添加 *.vue -- (編輯css、js語法提示。存疑)。
 (3).粗暴：直接在<script>標籤中添加type="text/ecmascript-6"，.vue裏面的代碼會高亮並支持ES6。--好像不推薦
 (4).將script標籤添加 type=」es6」 屬性
       <script type="es6"></script>
 而後打開 Editor => Language Injections 添加 XML Tag Injection，內容以下圖。
 
4.補充新功能：右鍵新建時出現.vue文件類型，就像新建html文件同樣
Setting-Editor-File and Code Templates 點擊右上角的加號 添加文件 Name爲vue File, Extension 爲vue,下面的位置能夠填寫自定義的初始化模板內容。

六、防止安卓低版本白屏問題

--不支持Promise

npm install babel-polyfill --save;
  main.js -- import 'babel-polyfill';

--打包後代碼放到服務器路徑錯誤

config/index.js/build
   --assetsPublicPath: '/', //運行在 根 目錄下
   assetsPublicPath: '/projects', //運行在projects目錄下

七、dependencies 與 devdependencies 區別
–save
–save-dev
–save會把依賴包名稱添加到package.json文件dependencies鍵下
–save-dev則添加到package.json文件devDependencies鍵下

devDependencies -- 開發時用的依賴項，它們不會被部署到生產環境。
Dependencies -- 生產環境中須要的依賴，即正常運行該包時所須要的依賴項。

八、Git鏈接WebStorm
git連接1git連接2