Vue開發技巧
1、轉發 請求
config -- index.js -- module.exports -- dev -- proxyTable
proxyTable: {
'/api':{
target:'http://0.0.0.0:8080',
pathRewrite: {
'^/api':'/static/mock'
}
}
},
2、設置路徑別名
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，其他地方需要加波浪線 ‘ ~ ’
3、打包上層目錄要求
config/index.js/build
--assetsPublicPath: '/', //運行在 根 目錄下
assetsPublicPath: '/projects', //運行在projects目錄下
4、.vue文件在webstorm中es6語法報錯解決方法
1 語法支持es6設置 -- 第一張圖
Languages & Frameworks > JavaScript
把 Javascript Language version 改爲 ECMAScript 6,這樣做所有的.js文件中es6不再報錯，但是在.vue文件中es6語法依然報錯。
2.vue文件中es6語法報錯
(1).打開 Editor => File Types 找到 HTML 添加 *.vue -- (編輯css、js語法提示。存疑)。
(2).粗暴：直接在<script>標籤中添加type="text/ecmascript-6"，.vue裏面的代碼會高亮並支持ES6。--好像不推薦
(3).將script標籤添加 type=”es6” 屬性 --- 第二張圖
<script type="es6"></script>
然後打開 Editor => Language Injections 添加 XML Tag Injection，內容如下圖。
3.補充新功能：右鍵新建時出現.vue文件類型，就像新建html文件一樣 -- 第三張圖
Setting-Editor-File and Code Templates 點擊右上角的加號 添加文件 Name爲vue File, Extension 爲vue,下面的位置可以填寫自定義的初始化模板內容。
6、防止安卓低版本白屏問題
--不支持Promise
npm install babel-polyfill --save;
main.js -- import 'babel-polyfill';--打包後代碼放到服務器路徑錯誤
config/index.js/build
--assetsPublicPath: '/', //運行在 根 目錄下
assetsPublicPath: '/projects', //運行在projects目錄下7、dependencies 與 devdependencies 區別
–save
–save-dev
–save會把依賴包名稱添加到package.json文件dependencies鍵下
–save-dev則添加到package.json文件devDependencies鍵下
devDependencies -- 開發時用的依賴項，它們不會被部署到生產環境。
Dependencies -- 生產環境中需要的依賴，即正常運行該包時所需要的依賴項。