vue學習整理

一、webpack+vue自定義路徑別名

 

　　vue-cli 用的是webpack，也能夠使用webpack自定義別名這個功能，自定義別名這個功能當你在多層文件夾嵌套的時候沒必要一層一層找路徑，直接使用自定義別名就能夠找到文件的位置。

 

設置方法：

 

**設置地址：**build文件夾下面的webpack.base.conf.js文件 
具體設置：

 

    

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增長這一行代碼
        }
    },

 使用方式：

使用的時候要像下方截圖的B處同樣前面要加上一個’~’，這裏的webstorm雖然提示報錯，咱們能夠不用管，代碼運行是正常的。

 

二、加載不一樣類型的模塊，配置module.rules

加載不一樣類型的模塊，配置module.rules

module.rules制定了一系列不一樣文件格式的加載方式和解析方式

module: { rules: [ { test: /\.css/, use: ['style-loader','css-loader'], }, { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } 

每一個規則能夠分爲三部分 - 條件(condition)，結果(result)和嵌套規則(nested rule)。

• 這其中rules數組就是loader用來的匹配和轉換資源的規則數組。

• test表明匹配需轉換文件的正則表達式。

• 而use數組表明用哪些loader去處理這些匹配到的文件。

• 此時再運行webpack，打包後的文件bundle.js就包含了css代碼。

• 其中css-loader負責加載css，打包css到js中。

• 而style-loader負責生成：在js運行時，將css代碼經過style標籤注入到dom中。