从头搭建vue3+webpack移动端项目

1.cmd输入命令行vue create hello-world(项目名称hello-world)

会显示你选择的vue版本，直接回车vue3，然后就是等……

 

 依次npm 下载sass(也可以是less,我习惯用sass),sass-loader,style-loader,webpack,webpack-cli,webpack-dev-server,webpack-merge。然后根目录下创建三个js文件:

 webpack.config.js:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp|ico)$/,
        type: 'asset/resource'
      },
      {
        test: /\/js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            cacheDirectory: true
          }
        }
      }
    ],
  },
  plugins: [

    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: './public/index.html', 
      filename: 'index.html',
    }),
 
    new CleanWebpackPlugin()
  ],
}

webpack.config.dev.js:

const path = require('path');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.js');

module.exports = merge(baseConfig, {
  module: {
    rules: [
      {
        test: /\.css|scss|sass$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
    ]
  },
  devServer: {
    open: true,
    host: '127.0.0.1',
    port: 8080,
    client: {
      logging: 'none',
    },
    hot: true,
    historyApiFallback: true,
    proxy: {//本地代理的
      "/api": {
          target: "代理地址",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  },
  mode: 'development',
  devtool: 'inline-source-map'
})

webpack.config.pro.js:

const path = require('path');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = merge(baseConfig, {
  module: {
    rules: [
      {
        test: /\.css|scss|sass$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
    ]
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'public', 'favicon.ico'),
          to: path.resolve(__dirname, 'dist/image/')
        }
      ]
    })
  ],
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new MiniCssExtractPlugin({
        filename: 'index-[contenthash:8].css',
        chunkFilename: '[id].css'
      })
    ]
  },
  cache: {
    type: 'filesystem',
  },
  mode: 'production',
  devtool: 'cheap-module-source-map'
})

 然后在package.json里scripts加入：

 "dev": "webpack-dev-server --mode=development --config webpack.config.dev.js",

后面终端输入npm run dev 就可以用webpack的热加载和本地代理了。

引入vue-router,npm i vue-router,src下创建文件夹router，在router里创建两个js文件：

index.js

import { createRouter, createWebHashHistory  } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHashHistory(),

  routes
})

export default router;    

routes.js

const routes = [
    {
      name: 'home',
      path: '/',
      component: () => import('@/views/home/index.vue')
    },
    {
      name: 'search',
      path: '/e',
      component: () => import('@/views/search/index.vue')
    },
    {
      name: 'error',
      path: '/:path(.*)',
      component: () => import('@/views/error/index.vue')
    },
  
  ];
  export default routes
  

在main.js

import router from './router/index'
createApp(App).use(router).mount('#app')

 是移动端项目就需要引入适配工具：我习惯用amfe-flexible+postcss-pxtorem

首先下载amfe-flexible和postcss-pxtorem，

在项目根目录下创建postcss.config.js文件，我用到vant组件库 所以

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue:37.5,//按设计稿
            propList: ['*'],
            selectorBlackList: ['vant', 'mu'],
            exclude: /node_modules/,
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
        },
    },
};

(webpack版本5.x.x以上的，必须要单独创建这个postcss.config.js，写在vue.config.js或者webpack.config.js里是无效的)

在main.js中引入import 'amfe-flexible'