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

目录

 一、下载node.js

二、下载vue-cli与webpack插件

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

四、项目启动

五、Vue项目工程结构(扩展知识)


一、下载node.js

1.检测是否已经安装过node.js

打开控制台,输入

npm -v

如果有会显示对应版本

Vue项目创建与启动(2023超详细的图文教程)_第1张图片

如果没有会显示无法找到

Vue项目创建与启动(2023超详细的图文教程)_第2张图片

如果没有则需要进行安装npm

window系统安装过程

nodejs安装及环境配置_Mr.羽猫君的博客-CSDN博客

linux系统安装指令

sudo apt install npm

下载好并配置环境后重新进行版本查询。检测是否成功

Vue项目创建与启动(2023超详细的图文教程)_第3张图片


二、下载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

如果出现这种情况

Vue项目创建与启动(2023超详细的图文教程)_第4张图片

说明你可能并没有用管理员身份打开控制台,请你在控制台右键以管理员身份打开。

而Linux用户只需要在指令前加上sudo如下,或者直接输入sudo并回车进入管理员模式。

sudo npm install vue-cli -g

安装好如下图所示:

Vue项目创建与启动(2023超详细的图文教程)_第5张图片

判断是否安装成功使用以下指令

vue --version

Vue项目创建与启动(2023超详细的图文教程)_第6张图片

以下解释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

安装成功后显示:

Vue项目创建与启动(2023超详细的图文教程)_第7张图片

以下解释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 文件名称

进入以下选项

第一部分,项目信息类

Vue项目创建与启动(2023超详细的图文教程)_第8张图片

 第二部分,项目配置类

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项目创建与启动(2023超详细的图文教程)_第9张图片

安装 Vue Router 是用于在 Vue.js 应用程序中实现路由功能的步骤。路由是指根据不同的 URL 地址,展示不同的内容或页面的机制。Vue Router 提供了一组工具来实现这个机制,使得在单页应用 (SPA) 中进行页面切换、导航和参数传递变得更加简单和灵活。 

3.是否开启ESLint代码检测---个人需求

Vue项目创建与启动(2023超详细的图文教程)_第10张图片

 使用 ESLint 是为了在代码编写过程中进行代码风格和质量的检查。ESLint 是一个开源的 JavaScript 代码检查工具,它可以帮助开发者发现并修复代码中的潜在问题,以保证代码的一致性和可读性。

4. 是否开启单元测试--个人需求

Vue项目创建与启动(2023超详细的图文教程)_第11张图片

设置单元测试是为了在开发过程中确保代码的正确性和稳定性,提高代码质量和可维护性。单元测试是一种自动化测试,它会对代码中的单个模块或函数进行测试,以验证其预期行为是否符合要求。

 5.项目下载方式---一般通过npm下载

 配置过npm镜像后,使用npm对项目下载会更加快速。


四、项目启动

在项目目录下输入指令

npm run dev

Vue项目创建与启动(2023超详细的图文教程)_第12张图片

查看结果与对应端口

Vue项目创建与启动(2023超详细的图文教程)_第13张图片

可以看到已经成功启动项目,后面就是项目运行的链接。

使用ctrl+点击链接:http://localhost:8080 可以快速打开对应网页地址

Vue项目创建与启动(2023超详细的图文教程)_第14张图片

这就是vue项目的主界面了。

想要关闭项目也很简单,在控制台输入Ctrl + c即可终止项目(可能会让你二次确定是否终止填写y即可)

Vue项目创建与启动(2023超详细的图文教程)_第15张图片

下面介绍vue项目的工程目录以及对应作用,仅作为拓展知识


五、Vue项目工程结构(扩展知识)

Vue项目创建与启动(2023超详细的图文教程)_第16张图片

Vue项目创建与启动(2023超详细的图文教程)_第17张图片


你可能感兴趣的:(Vue2.0,vue.js,前端,javascript)