vue cli是Vue.js的官方腳手架,使用它可以快速搭建Vue.js項目。但是在使用vue cli的過程中,也會遇到一些坑點。下面來詳細說一下:
第一個坑點是使用vue cli創(chuàng)建項目時,可能會遇到無法下載項目模板的情況。這是因為默認情況下使用的是國外的源,而我們需要連接國內(nèi)的源。解決方法如下:
vue init webpack my-project # cd my-project # npm install
第二個坑點是使用vue router時,如果在路由配置中使用了ES6的import語句,會出現(xiàn)報錯:“Parsing error: Unexpected token import”。這是因為webpack默認配置下,不知道如何處理ES6的import語句。
解決方法是在webpack配置文件中添加babel-loader的配置,如下:
module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }
第三個坑點是在使用vue i18n國際化時,如果在組件中使用了動態(tài)綁定語言包的方式,會出現(xiàn)報錯:“TypeError: Cannot read property 't' of undefined”。這是因為動態(tài)綁定時無法獲取Vue實例,無法調(diào)用$t方法。
解決方法是在Vue實例中創(chuàng)建一個全局的$i18n對象,如下:
const i18n = new VueI18n({ locale: 'en-US', messages: { 'en-US': { hello: 'Hello!', goodbye: 'Goodbye!' }, 'zh-CN': { hello: '你好!', goodbye: '再見!' } } }) const app = new Vue({ el: '#app', i18n, data: { lang: 'en-US' } })
以上就是使用vue cli時可能遇到的一些坑點及解決方法。當然,還會有其他的坑點出現(xiàn),需要我們自行探索。
下一篇vue如何引用cdn