(一)assets資料夾與static資料夾的區別
區別一:assets檔案是src下的,所以最後執行時需要進行打包,而static檔案不需要打包就直接放在最終的檔案中了
區別二:assets中的檔案在vue中的template/style下用../這種相對路徑的形式進行引用,在script下必須用@import的方式引入,
而static下的檔案在.vue中的任何地方都只要使用../這種相對路徑的方式引入,
總結一下
1.assets用來放置樣式、靜態圖片,只要src下面的元件中用到的資源就放在assets中。
2.static用來放沒有npm包的第三方外掛,字型檔案。
3.assets與components同級 components下的.vue引用靜態檔案時,相對路徑為 ../assets/wapFront
4.assets與app.vue同級 相對路徑為 ./assets/wapFront
(二)vue如何引入其它靜態檔案:
1.src目錄下的資源只能import或require。
2.想靜態引入的話,建立一個與src同級的目錄例如static,然後把靜態資源放入該資料夾下,html的引入路徑如下:./static/...
注:試過一定要放在static資料夾下,否則報錯
(三)vue如何引入sass
npm i sass --save-dev 裝下它
npm i sass-loader --save-dev 再裝下它
在webpack.base.config配置檔案里加上這段
{
test: /\.scss$/,
loader: 'style!css!sass'
},
在元件檔案.vue裡直接引入scss樣式
<style lang="scss">
.hello input {
color: red;
}
</style>
(四)vue報錯cannot GET
1.你init vue-cli的時候,有個選項問你是否需要eslint可以選擇不需要,因為它是檢驗的,可以不用,如果用它格式寫的不規範啟不來頁面
2.如果已經安裝eslint,將下圖所示部分註釋掉,eslint對空格要求比較嚴格