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

news2025/2/27 23:06:57

一、下载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 webpack

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

#像这种都是策略问题，用管理员打开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)