WebPack搭建vue项目

手动搭建vue项目

  1. 创建文件夹 vue-pro,进入文件夹进行npm包管理初始化

    npm init

  2. 按照终端要求进行配置项目的page.json文件

    image-20210110171149658

  3. 配置完成会发现文件夹内有了一个page.json文件

    image-20210110171247354

  4. 在项目本地安装webpack打包工具，进行项目内模块化开发

    npm install webpack --save-dev

  5. 在项目内进行创建文件，并测试webpack打包工具，这里对webpack进行配置，实现自定义npm run serve命令直接将文件进行打包

    image-20210110172845319

    这里配置了 npm run serve命令指向调用webpack进行项目的打包

    image-20210110173009161

  6. 初始化index.html里面引入dist的文件

    image-20210110172922149

  7. 然后在页面内可以发现main.js的运行

    image-20210110173118909

  8. 然后进行vue项目文件的配置，配置webpack，进行将vue文件，css文件和其他js文件的配置打包【详细配置内容查看代码  -> 码云地址链接】

版权声明：本文为weixin_42551781原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。