Vue项目创建与启动（2023超详细的图文教程）

目录

 一、下载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插件作用

1. 项目初始化和配置：Vue CLI 插件可以在项目初始化时提供一些预配置选项，帮助开发者快速创建一个符合特定需求的项目结构。例如，Vue Router 插件可以集成路由功能，Vuex 插件可以集成状态管理功能。这样，开发者可以通过简单的命令或交互式界面进行选择，自动配置项目的依赖和文件结构。

2. 开发扩展：Vue CLI 插件可以提供额外的开发支持和工具，使开发体验更加高效和愉悦。例如，ESLint 插件可以集成代码规范检查工具，Stylelint 插件可以集成样式规范检查工具，Unit Testing 插件可以集成单元测试工具等。这些插件可以帮助开发者在开发过程中保持良好的代码质量、一致的代码风格，并提供更好的调试和测试能力。

3. 构建优化：Vue CLI 插件可以在项目构建过程中提供优化功能，以提高应用程序的性能和用户体验。例如，Babel 插件可以进行 JavaScript 代码转译，将新的 JavaScript 语法转换为浏览器可兼容的代码；CSS 预处理器插件可以将预处理器语言（如 Sass 或 Less）编译为普通的 CSS 代码；Webpack 插件可以进行代码分割、资源压缩、缓存优化等等。

4. 部署和发布：Vue CLI 插件可以提供一些工具和配置选项，以帮助开发者更轻松地部署和发布其 Vue.js 应用程序。例如，PWA 插件可以帮助将应用转换为渐进式网络应用程序，并自动生成相关的配置文件；Docker 插件可以帮助开发者在容器环境中打包和运行应用程序。

3安装webpack的插件\全局安装

npm install -g webpack

Window系统如果报错请你检查以下同源策略

#像这种都是策略问题，用管理员打开vscode，然后设置策略
get-ExecutionPolicy
 
#执行set-ExecutionPolicy RemoteSigned  然后 get-ExecutionPolicy，显示RemoteSigned就是ok了
 
set-ExecutionPolicy RemoteSigned

安装成功后显示：

以下解释webpack插件作用

1. 优化代码：Webpack 插件可以通过代码分割、Tree Shaking、Scope Hoisting 等技术，优化 JavaScript 代码和构建结果的大小和性能。例如，CommonsChunkPlugin 插件可以将公共模块提取到单独的文件中，避免重复打包，提高构建速度；UglifyJsPlugin 插件可以将 JavaScript 代码压缩和混淆，减少文件大小，提高网站性能。

2. 处理资源文件：Webpack 插件可以帮助处理各种资源文件，如图片、CSS、字体等。例如，ImageMinWebpackPlugin 插件可以通过压缩和优化图片文件，减少图片大小，提高网页加载速度；ExtractTextWebpackPlugin 插件可以将 CSS 文件提取到单独的文件中，便于浏览器异步加载。

3. 打包结果管理：Webpack 插件可以帮助管理构建结果，包括输出目录、文件名、版本号等信息。例如，HtmlWebpackPlugin 插件可以根据模板文件生成 HTML 文件，并自动注入构建结果；CleanWebpackPlugin 插件可以在每次构建前清除输出目录，避免旧文件的残留。

4. 增强开发体验：Webpack 插件可以提供额外的开发支持和工具，使开发体验更加高效和愉悦。例如，HotModuleReplacementPlugin 插件可以实现热替换功能，允许在不刷新页面的情况下更新模块；FriendlyErrorsWebpackPlugin 插件可以美化 Webpack 构建错误信息，方便开发者进行调试和排错。

---

三、项目初始化(项目配置详细信息)

输入指令

vue init webpack 文件名称

进入以下选项

第一部分，项目信息类

 第二部分，项目配置类

1.项目构建---一般选择第一个。

1. Runtime + Compiler：推荐大多数用户使用

   • 使用 Runtime + Compiler 构建方式时，Vue.js 包含完整的运行时和编译器代码。
   • 这种构建方式允许你在 Vue 组件中使用 template 语法，并且会在运行时将模板编译为渲染函数。
   • 渲染函数会在组件实例化过程中动态生成，然后再渲染组件到页面上。
   • 这种方式的好处是比较灵活，可以直接在组件中使用 template，并且支持在 Vue 组件中编写完整的 Vue 特定 HTML 代码。

2. 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项目工程结构（扩展知识）

---