您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

前言

Vue是当下非常火热的前端框架，选择Vue-Cli是大部分人主流的选择，因为其快捷、便利可以让我们一键生成整个项目模板，如果需要自定义配置下从0开始搭建一个Vue项目，其实也不难，接下来就来记录一下。

项目初始化

通过命令：

npm init -y

生成一个初始的带包管理器的项目模板，参考Vue3脚手架生成的目录，我们也同样同步目录文件：

文件内容笔者直接参照vue-cli生成的文件内容复制粘贴~~就不贴代码了。

构建打包

这里我们选择Webpack进行打包，首先下载依赖包。

npm i --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin

这里首先下载这几个最基本的依赖包，简单说明下：

• webpack 我们需要打包的包
• webpack-cli 打包依赖包+1
• webpack-dev-server 开发环境建立本地网络服务器所需的包
• webpack-merge 开发环境、生产环境分离打包
• html-wepback-plugin 打包html文件的依赖包

OK，下载完成，接下来我们新建3个文件
webpack.config.js、webpack.config.dev.js、webpack.config.pro.js

这里简单说明下，如果不理解可以看笔者最近的一篇文章Webpack分环境打包（生产/开发两套打包）

• webpack.config.js 公共配置项
• webpack.config.dev.js 开发环境的配置项
• webpack.config.pro.js 生产环境的配置项

配置npm命令

这里配置一下生产环境和开发环境的打包命令。

scripts: {

   
     "dev": "webpack-dev-server --mode=development --config webpack.config.dev.js",
    "build": "npx webpack --mode=production --config webpack.config.pro.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', // 这是html模板存放的地址
      filename: 'index.html',
    }
),
    new CleanWebpackPlugin()
  ],
}
    

简单说明下，首先安装公共配置的依赖包：

npm i --save-dev vue-loader clean-webpack-plugin babel-loader @babel/preset-env

• entry、output分别配置了项目的打包入口和打包出口，这个是公共配置项，毋庸置疑；
• resolve配置了项目中的便捷路径转义写法，这里就先写一个常用的@；
• loader中配置了vue-loader、静态资源、babel三个预处理器进行文件处理；
• plugins中配置了vue的插件、html模板编译、打包清空目录三个插件；

这些都是生产、开发环境不会改变的固定配置。

配置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
  }
,
  mode: 'development',
  devtool: 'inline-source-map'
}
    )

这里开发环境比较简单，主要就是devServer本地服务器的配置，可以让我们方便的开发，以及样式的预处理器，由于开发中不需要进行压缩，因此选择style-loader即可。

最后通过webpack-merge插件将当前配置和webpack.config.js配置合并。

开发配置中所需的依赖包：

npm i --save-dev style-loader css-loader sass-loader sass

配置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'
}
)

生产环境的打包因注重优化，如打包文件体积、打包速度，因此都是一些优化配置项。
先说一下生产环境的依赖包把。

npm i --save-dev mini-css-extract-plugin copy-webpack-plugin

配置项介绍：

• 样式预处理器采用 mini-css-extract-plugin 将所有样式抽离成一行；
• copy-webpack-plugin 将一些静态资源直接转移至dist目录，这里用Vue ico举例；
• optimization 进行了代码压缩，包括tree-shaking、js压缩、css压缩；
• cache 开启文件缓存，可以让我们的打包速度飞跃性的提升；

产物

至此，我们的所有webpack配置就结束了，展示一下产物吧。

生产环境打包：

开发环境页面：

Vue全家桶加入

Vue Router

首先下载依赖包：

npm i vue-router --save-dev

接下来在src目录下新建router文件夹，并创建index.js、routes.js。

index.js:

import {

    createRouter, createWebHistory }
 from 'vue-router'
import routes from './routes'    //导入router目录下的router.js

const router = createRouter({

   
  history: createWebHistory(),     //路由模式
  routes
}
    )

export default router;
      //导出

routes.js:

const routes = [
  {
    
   
    name: 'a',
    path: '/a',
    component: () =>
 import('@/view/A')
  }
,
  {
    
   
    name: 'b',
    path: '/b',
    component: () =>
 import('@/view/B')
  }
    ,

];
    
export default routes

在src目录下创建view目录，并创建A.vue、B.vue用于测试路由跳转。

A.vue:

template>
    
  div>
    
    A
  /div>
    
/template>
    

script setup>

import {

    onMounted }
     from "vue"

onMounted(() =>
 {

   
  console.log("A页面渲染了")
}
    )
/script>
    

style lang="scss" scoped>
    /style>

测试：

Vuex

下载依赖包：

npm i --save-dev vuex

在src目录下创建store.js并写入：

// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
import {

    createStore }
     from 'vuex';


export default createStore({

   
  state: {

   
    name: "John",
  }
,
  getters: {

   
  }
,
  mutations: {

   
    changeName(state, value) {

   
      state.name = value
    }
,
  }
,
  actions: {

   
  }
,
  modules: {

   
  }

}
    )

接下来还是使用A.vue进行测试，A.vue文件修改为如下：

template>
    
  div>
    
    A
    span @click="changeName">
{

   {

    store.state.name }
}
    /span>
    
  /div>
    
/template>
    

script setup>

import {

    onMounted }
 from "vue"
import {

    useStore }
     from "vuex"

let store = useStore()
onMounted(() =>
 {

   
  console.log("A页面渲染了")
}
    )
const changeName = () =>
 {

   
  store.commit("changeName", "Mike")
}
    
/script>
    

style lang="scss" scoped>
    /style>

测试：

Axios

下载依赖包：

npm i axios --save-dev

src目录下新建_utils/request.js：

import axios from 'axios'

// 创建一个 axios 实例
const service = axios.create({

   
  baseURL: '/api', // 所有的请求地址前缀部分
  timeout: 60000, // 请求超时时间毫秒
  withCredentials: true, // 异步请求携带cookie
  headers: {

   
    // 设置后端需要的传参类型
    'Content-Type': 'application/json',
    'token': 'your token',
    'X-Requested-With': 'XMLHttpRequest',
  }
,
}
)

// 添加请求拦截器
service.interceptors.request.use(
  function (config) {

   
    // 在发送请求之前做些什么
    return config
  }
,
  function (error) {

   
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error)
  }

)

// 添加响应拦截器
service.interceptors.response.use(
  function (response) {

   
    console.log(response)
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // dataAxios 是 axios 返回数据中的 data
    const dataAxios = response.data
    // 这个状态码是和后端约定的
    const code = dataAxios.reset
    return dataAxios
  }
,
  function (error) {

   
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    console.log(error)
    return Promise.reject(error)
  }
    
)

export default service

至此，一个基础的Vue项目搭建完毕了，项目结构如图：

总结

使用Vue-Cli搭建项目很方便，但是自己从0搭建一个完整的Vue项目运行环境也是巩固Webpack学习的一个很好的过程，项目已经上传github给大家学习参考。

github：https://github.com/fengxinhhh/vue-cli

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！