webpack命令行 webpack命令行按需打包

clique怎么设置

安装

vue cli 2

vue cli 3

需要注意的是如果希望安装 vue-cli 3，而环境里已安装 vue-cli 2，则需要使用指令

进行卸载后，再安装 vue-cli 3

使用

这里是使用脚手架初始化项目的指令，而这里的 webpack 指的不是 webpack 本身，而是预设好的一套完整版 webpack 配置的模板。我个人习惯使用 webpack-simple 模板

完整的模板列表，请访问

vuejs-templates

vuejs-templates

vue-cli 3

在 vue-cli 3 中使用以下指令创建项目：

执行后，同样是有配置向导一步步指引着配置步骤，这里跟 vue-cli 2 一致，但个人是使用

以图形界面的方式来创建项目，很方便好用。

使用 vue-cli 脚手架配置并初始化项目后，不论是 vue-cli 2 还是 vue-cli 3，脚手架所提供的均为项目的配置以及依赖的库设置，安装依赖库(npm i)的步骤依然需要手动执行的（vue ui 模式例外，该模式创建项目后，可以在创建后自动下载依赖库）

所以在脚手架配置好项目后，统一执行 npm i 来安装所有依赖库即可，不需要单独再去安装 webpack

vue根目录是什么

vue根目录:

build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。

config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。

node_modules：存放npm命令下载的开发环境和生产环境的依赖包。

src: 存放项目源码及需要引用的资源文件。

src下assets：存放项目中需要用到的资源文件，css、js、images等。

src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。

前端部署和发布流程

1. 代码编写：前端开发人员编写和测试代码，确保代码的功能和质量符合需求。

2. 代码托管：将代码提交到代码托管平台，如Git、SVN等。

3. 版本管理：在代码托管平台上进行版本管理，保证不同版本的代码可以被追踪和管理。

4. 自动化构建：使用自动化构建工具（如Webpack、Gulp、Grunt等）将代码进行打包、压缩、优化等处理，生成可部署的静态资源文件。

5. 部署到测试环境：将静态资源文件部署到测试环境中，进行功能测试和性能测试。

6. 修复问题：根据测试结果，修复代码中的问题和Bug。

7. 再次构建：重新使用自动化构建工具生成静态资源文件。

8. 部署到生产环境：将修复后的静态资源文件部署到生产环境中，发布新版本。

9. 测试新版本：对新发布的版本进行测试，确认没有问题后上线。

10. 监控和维护：对上线后的系统进行监控和维护，及时处理出现的问题。

以上是前端部署和发布流程中的主要步骤，具体的流程可能会因为公司或者项目的不同而有所差异。在实践过程中，可以根据项目需要和实际情况，进行适当的调整和改进。