京华建设科技有限公司网站外链代发软件
目录
一、下载node.js
二、下载vue-cli与webpack插件
三、项目初始化(项目配置详细信息)
四、项目启动
五、Vue项目工程结构（扩展知识）
一、下载node.js
1.检测是否已经安装过node.js
打开控制台,输入
npm -v
如果有会显示对应版本
如果没有会显示无法找到
如果没有则需要进行安装npm
window系统安装过程
nodejs安装及环境配置_Mr.羽猫君的博客-CSDN博客
linux系统安装指令
sudo apt install npm
下载好并配置环境后重新进行版本查询。检测是否成功
二、下载vue-cli与webpack插件
1.设置npm下载为国内镜像（因为npm下载国外的软件会非常慢）指令：
npm config set registry https://registry.npm.taobao.org#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
2.进行全局安装npm-cli插件
npm install vue-cli -g如果出现这种情况
说明你可能并没有用管理员身份打开控制台，请你在控制台右键以管理员身份打开。
而Linux用户只需要在指令前加上sudo如下,或者直接输入sudo并回车进入管理员模式。
sudo npm install vue-cli -g安装好如下图所示：
判断是否安装成功使用以下指令
vue --version
以下解释vue-cli插件作用
项目初始化和配置：Vue CLI 插件可以在项目初始化时提供一些预配置选项，帮助开发者快速创建一个符合特定需求的项目结构。例如，Vue Router 插件可以集成路由功能，Vuex 插件可以集成状态管理功能。这样，开发者可以通过简单的命令或交互式界面进行选择，自动配置项目的依赖和文件结构。
开发扩展：Vue CLI 插件可以提供额外的开发支持和工具，使开发体验更加高效和愉悦。例如，ESLint 插件可以集成代码规范检查工具，Stylelint 插件可以集成样式规范检查工具，Unit Testing 插件可以集成单元测试工具等。这些插件可以帮助开发者在开发过程中保持良好的代码质量、一致的代码风格，并提供更好的调试和测试能力。
构建优化：Vue CLI 插件可以在项目构建过程中提供优化功能，以提高应用程序的性能和用户体验。例如，Babel 插件可以进行 JavaScript 代码转译，将新的 JavaScript 语法转换为浏览器可兼容的代码；CSS 预处理器插件可以将预处理器语言（如 Sass 或 Less）编译为普通的 CSS 代码；Webpack 插件可以进行代码分割、资源压缩、缓存优化等等。
部署和发布：Vue CLI 插件可以提供一些工具和配置选项，以帮助开发者更轻松地部署和发布其 Vue.js 应用程序。例如，PWA 插件可以帮助将应用转换为渐进式网络应用程序，并自动生成相关的配置文件；Docker 插件可以帮助开发者在容器环境中打包和运行应用程序。
3安装webpack的插件\全局安装
npm install -g webpackWindow系统如果报错请你检查以下同源策略
#像这种都是策略问题，用管理员打开vscode，然后设置策略
get-ExecutionPolicy#执行set-ExecutionPolicy RemoteSigned 然后 get-ExecutionPolicy，显示RemoteSigned就是ok了set-ExecutionPolicy RemoteSigned安装成功后显示：
以下解释webpack插件作用
优化代码：Webpack 插件可以通过代码分割、Tree Shaking、Scope Hoisting 等技术，优化 JavaScript 代码和构建结果的大小和性能。例如，CommonsChunkPlugin 插件可以将公共模块提取到单独的文件中，避免重复打包，提高构建速度；UglifyJsPlugin 插件可以将 JavaScript 代码压缩和混淆，减少文件大小，提高网站性能。
处理资源文件：Webpack 插件可以帮助处理各种资源文件，如图片、CSS、字体等。例如，ImageMinWebpackPlugin 插件可以通过压缩和优化图片文件，减少图片大小，提高网页加载速度；ExtractTextWebpackPlugin 插件可以将 CSS 文件提取到单独的文件中，便于浏览器异步加载。
打包结果管理：Webpack 插件可以帮助管理构建结果，包括输出目录、文件名、版本号等信息。例如，HtmlWebpackPlugin 插件可以根据模板文件生成 HTML 文件，并自动注入构建结果；CleanWebpackPlugin 插件可以在每次构建前清除输出目录，避免旧文件的残留。
增强开发体验：Webpack 插件可以提供额外的开发支持和工具，使开发体验更加高效和愉悦。例如，HotModuleReplacementPlugin 插件可以实现热替换功能，允许在不刷新页面的情况下更新模块；FriendlyErrorsWebpackPlugin 插件可以美化 Webpack 构建错误信息，方便开发者进行调试和排错。
三、项目初始化(项目配置详细信息)
输入指令
vue init webpack 文件名称进入以下选项
第一部分，项目信息类
第二部分，项目配置类
1.项目构建---一般选择第一个。
Runtime + Compiler：推荐大多数用户使用
- 使用 Runtime + Compiler 构建方式时，Vue.js 包含完整的运行时和编译器代码。
- 这种构建方式允许你在 Vue 组件中使用 template 语法，并且会在运行时将模板编译为渲染函数。
- 渲染函数会在组件实例化过程中动态生成，然后再渲染组件到页面上。
- 这种方式的好处是比较灵活，可以直接在组件中使用 template，并且支持在 Vue 组件中编写完整的 Vue 特定 HTML 代码。
Runtime-only：轻量化构建，适用于一些特定场景
- 使用 Runtime-only 构建方式时，Vue.js 只包含运行时代码，不包含编译器。
- 这种构建方式下，无法在组件中直接使用 template，而是需要使用 render 函数手动编写组件的渲染逻辑。
- 这样做可以减小 Vue.js 包的体积，通常会比 Runtime + Compiler 构建出来的包小约 6KB (min+gzip)。
- Runtime-only 构建方式更适合使用手动编写的 render 函数，或者配合使用 Vue 的单文件组件 (.vue 文件) 来开发。
2.安装路由---一般选择是(Y)
安装 Vue Router 是用于在 Vue.js 应用程序中实现路由功能的步骤。路由是指根据不同的 URL 地址，展示不同的内容或页面的机制。Vue Router 提供了一组工具来实现这个机制，使得在单页应用 (SPA) 中进行页面切换、导航和参数传递变得更加简单和灵活。
3.是否开启ESLint代码检测---个人需求
使用 ESLint 是为了在代码编写过程中进行代码风格和质量的检查。ESLint 是一个开源的 JavaScript 代码检查工具，它可以帮助开发者发现并修复代码中的潜在问题，以保证代码的一致性和可读性。
4. 是否开启单元测试--个人需求
设置单元测试是为了在开发过程中确保代码的正确性和稳定性，提高代码质量和可维护性。单元测试是一种自动化测试，它会对代码中的单个模块或函数进行测试，以验证其预期行为是否符合要求。
5.项目下载方式---一般通过npm下载
配置过npm镜像后，使用npm对项目下载会更加快速。
四、项目启动
在项目目录下输入指令
npm run dev
查看结果与对应端口
可以看到已经成功启动项目，后面就是项目运行的链接。
使用ctrl+点击链接：http://localhost:8080 可以快速打开对应网页地址
这就是vue项目的主界面了。
想要关闭项目也很简单，在控制台输入Ctrl + c即可终止项目（可能会让你二次确定是否终止填写y即可）
下面介绍vue项目的工程目录以及对应作用，仅作为拓展知识
五、Vue项目工程结构（扩展知识）
