Vue教程|搭建vue项目|Vue-CLI2.x 模板脚手架

一、项目构建环境准备

在构建Vue项目之前,需要搭建Node环境以及Vue-CLI脚手架,由于本篇文章为上一篇文章的补充,也是为了给大家分享更为完整的搭建vue项目方式,所以环境准备部分采用Vue教程|搭建vue项目|Vue-CLI新版脚手架中介绍的方式,本篇文章中就不再赘述,

通过以下命令查看安装的版本:

mac@MacdeMacBook-Pro ~ % node -v
v20.12.2
mac@MacdeMacBook-Pro ~ % vue -V
@vue/cli 5.0.8

二、搭建Vue项目

使用 Vue-CLI2.x 模板 (旧版本)构建项目

由于我们安装的是新版本 Vue-CLI(@vue/cli 5.0.8);Vue CLI >= 3 和Vue-CLI2.x旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果我们仍然需要使用旧版本的 vue init 功能,此时我们需要通过 NPM 全局安装一个桥接工具,命令如下:

npm install -g @vue/cli-init

安装后,我们就可以使用老版本命令,以老版本结构为基础创建项目了

vue init webpack命令构建项目

执行一下命令:

vue init webpack vue-cli2-case

 设置项目名

拉取完模板后,会出现如下画面,让我们来设置项目名,一般文件夹名就是项目名,所以直接回车就可以

设置项目描述

接下来,会提示让我们设置项目描述,不想用默认的就改一下,然后回车

设置项目作者

接下来,会提示让我们设置项目作者,不想用默认的就改一下,然后回车

选择运行时版本还是模板编译版本

接下来,会提示让我们设置 Webpack 打包时使用的 Vue 版本,第一个是模板编译版,第二个是运行时版本,按照需要自己选就可以,按键盘的上下箭头就能进行选择,选中的会变成深色字体,选好按回车,我们选择运行时版本,然后回车

是否安装 vue-router 插件

接下来,会提示让我们输入 Y 或 n 来确定是否使用 vue-router 插件, 在 Vue 进行单页面应用开发时,vue-router可以支持路由跳转功能,我们输入了 Y,选择安装

是否安装 ESLint 插件

接下来,会提示让我们输入“ Y ” 或 “ n ”来确定是否使用 ESLint 插件, ESLint 是一个静态语法检查的插件,它会按照ECMAScript 规范 或 自定义的规范 对代码进行检查,我们输入“ n,选择不安装

是否安装单元测试相关插件

接下来,会提示让我们输入“ Y ” 或 “ n ”来确定是否使用单元测试相关插件,我们输入“ n,选择不安装

是否安装 Nightwatch 测试插件

接下来,会提示让我们输入“ Y ” 或 “ n ”来确定是否使用 Nightwatch 测试插件,我们输入“ n,选择不安装

10) 依赖的安装方式

接下来,会让我们选择以 “ npm ” 还是 “ yarn ” 的方式来安装创建项目所需的依赖,我们选 “ npm ” 方式

等待项目构建完成

项目构建需要一段时间,请耐心等待 

 出现如上画面,表示项目构建成功啦

验证项目正确性

我直接使用上图中的命令 cd vue-cli2-case   npm run dev

查看工程结构

工程结构介绍

整体结构介绍

目录名描述
build项目打包的相关配置,都是一些对 webpack 进行配置的文件
config定义构建相关的变量,主要是为了提供给 build 文件夹中的文件使用
node_modules通过 npm 下载的项目中使用的依赖包
src存放业务相关的代码和资源
src -> assets存放图片之类的资源文件,这个目录中放的都是想被 webpack 的各种 loader 当作模块处理的文件
src -> components存放项目中想被复用的公共 UI 组件
static存放图片之类的资源文件,这个目录中的文件打包时会被 CopyWebpackPlugin 插件复制到出口根目录

 结构细分介绍

build 目录内文件介绍

文件名描述
build.js构建生产环境的代码
check-versions.js检查 Node.js 环境 和 NPM 的版本
utils.js构建辅助工具类,类中主要是通过运算,来动态生成 webpack 一些加载器的配置
vue-loader.conf.js用来配置 sourceMap,项目打包后会对 JS 压缩,sourceMap 用来记录代码压缩前后的对应关系,方便调试
webpack.base.conf.jswebpack 配置文件 - 开发环境和生产环境的通用配置。将基础配置、开发环境和生产环境各对应一个文件比较易于维护
webpack.dev.conf.jswebpack 配置文件 - 开发环境的配置,webpack 打包过程中内容会与 webpack.base.conf.js 合并
webpack.prod.conf.jswebpack 配置文件 - 生产环境的配置,webpack 打包过程中内容会与 webpack.base.conf.js 合并

config 目录内文件介绍

文件名描述
dev.env.js定义开发环境构建时要用的变量
prod.env.js定义生产环境构建时要用的变量
index.js定义开发环境和生产环境构建时都要使用的变量

 src 目录内文件介绍

文件名描述
assets -> logo.pngDemo 中要用的图片,会被 webpack 的加载器当作模块处理,实际项目中的静态资源也建议放在该目录下
components -> HelloWorld.vueDemo 中定义的组件,实际项目中的自定义组件也建议放在该目录下
App.vueDemo 中的入口组件,实际项目中的入口组件也建议放在这个位置
main.jsDemo 中的入口文件,里面会定义 Vue 对象,并使用入口组件 App.vue

其他文件

文件名描述
static -> .gitkeep目录内暂时没有内容,git 默认不会管理空目录,所以目录内习惯建一个空文件 .gitkeep,目的是让 git 管理
.babelrc该文件用来配置 ES 语法适配插件 - Babel
.editorconfig定义代码风格,使用 IDE 对代码进行格式化时,会参照该文件
.gitignore用来定义可以被 git 忽略的文件
.postcssrc.js用来配置 PostCSS 插件的,该插件用来做跨浏览器样式兼容的,能自动添加特殊浏览器的私有前缀
index.html主页,现在都是单页面应用,所以该 html 唯一的作用就是来驱动 main.js
package.jsonnpm 配置文件
README.mdgit 管理的项目,可以通过该文件来添加项目说明

 至此基于Vue-CLI2.x 模板脚手架搭建的vue2.x项目就分享结束啦,希望对大家有所帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust面向对象特性

Rust的面向对象特性 本文已同步至自建博客 Rust在设计的时候受到很多编程范式的影响,包括面向对象。面向对象的语言共有一些共同的特征,即对象、封装和继承。 封装 一个对象的实现细节对使用该对象的代码不可访问。因此,对象交互的唯一方…

前海湾地铁的腾通数码大厦背后的临时免费停车点探寻

临时免费停车点:前海湾地铁的腾通数码大厦背后的桂湾大街,目前看不仅整条桂湾大街停了​车,而且还有工地餐点。可能是这个区域还是半工地状态,故暂时还不会有​罚单的情况出现。 中建三局腾讯数码大厦项目部A栋 广东省深圳市南山…

Python知识分享第十五天

“”" 细节: 1.如下定义的类的几种写法 并无任何区别 最终效果都一样 只是写法不同 2.所有的类都直接或间接继承自object 它是所有类的父类 定义类的格式 格式1 class 类名: pass 格式2 class 类名(): pass 格式3 class 类名(父类名): pass “”" # 需求: 通过上述…

遥感数据集:FTW全球农田边界和对应影像数据,约160万田块边界及7万多个样本

Fields of The World (FTW) 是一个面向农业田地边界实例分割的基准数据集,旨在推动机器学习模型的发展,满足全球农业监测对高精度、可扩展的田地边界数据的需求。该数据集由kerner-lab提供,于2024年8月28日发布,主要特征包括&…

USB Type-C一线通扩展屏:多场景应用,重塑高效办公与极致娱乐体验

在追求高效与便捷的时代,启明智显USB Type-C一线通扩展屏方案正以其独特的优势,成为众多职场人士、娱乐爱好者和游戏玩家的首选。这款扩展屏不仅具备卓越的性能和广泛的兼容性,更能在多个应用场景中发挥出其独特的价值。 USB2.0显卡&#xff…

项目二技巧一

目录 nginx实现根据域名来访问不同的ip端口 配置Maven私服 快照版和发布版的区别 快照版本(Snapshot) 发布版本(Release) 导入发布版的父工程 理清楚授权规则 一.首先浏览器发送/manager/**路径请求 第二步:构造…

如何更好地设计SaaS系统架构

SaaS(Software as a Service)架构设计的核心目标是满足多租户需求、支持弹性扩展和高性能,同时保持低成本和高可靠性。一个成功的SaaS系统需要兼顾技术架构、资源利用、用户体验和商业目标。本文从以下几个方面探讨如何更好地设计SaaS系统架构…

手搓一个不用中间件的分表策略

场景:针对一些特别的项目,不用中间件,以月为维度进行分表,代码详细设计方案 1. 定义分片策略 首先,定义一个分片策略类,用于决定数据存储在哪个分表中 import java.time.LocalDate; import java.time.fo…

详解SpringCloud集成Camunda7.19实现工作流审批(二)

本章将分享的是camunda流程设计器--Camunda Modeler的基本使用(对应camunda版本是7.19),包括bpmn流程图画法,各种控件使用以及一些日常业务场景的流程图的实现 参考资料: Camunda BPMN 基础组件-CSDN博客 Camunda: Exe…

webpack(react)基本构建

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源(如 JavaScript、CSS、图片等)视为模块,并将它们打包成一个或多个输出文件,以便…

html select下拉多选 修改yselect.js插件实现下拉多选,搜索,限制选中,默认回显等操作

需求:要在select标签实现下拉多选,搜索,限制选中,默认回显等操作,之前同事用的yselect.js,网上用的简直是寥寥无几,找了半天没找到限制选中的方法,看了源代码才发现根本没有&#xf…

c++哈希表(原理、实现、开放寻址法)适合新手

c系列哈希的原理及实现(上) 文章目录 c系列哈希的原理及实现(上)前言一、哈希的概念二、哈希冲突三、哈希冲突解决3.1、开放寻址法3.2、删除操作3.3、负载因子四、代码实现 总结 前言 红黑树平衡树和哈希有不同的用途。 红黑树、…

了解HTTPS以及CA在其中的作用

在这个信息爆炸的时代,每一次指尖轻触屏幕,都是一次数据的旅行。但您是否真正了解,这些数据在通往目的地的旅途中,是如何被保护的呢? HTTPS(HyperText Transfer Protocol Secure)是一种安全的网…

electron-vite_14窗口默认全屏铺满

有时候应用打包后,希望全屏显示;而默认的宽度和高度,是无法满足的;这时需要单独处理; 核心代码 // 1.引入screen对象 import { BrowserWindow, screen } from electron; function createWindow(): void {// 2.获取屏幕尺寸const { width, height } screen.getPrim…

mysql-为什么需要线程池

mysql-为什么需要线程池 MySQL线程池的概述与应用 MySQL线程池是MySQL数据库中的一个重要组件,旨在提高数据库的性能、吞吐量和可伸缩性。它通过管理数据库服务器的线程生命周期,减少了线程的创建和销毁的开销,并通过优化资源使用&#xff…

【接口封装】——10、系统托盘

解释&#xff1a; 1、定义好按钮的状态&#xff1a;创建 map 映射关系&#xff0c;即 一个名字对应一个按钮 2、对不同按钮实现不同的信号槽函数 头文件&#xff1a; #include "SysTrayIcon.h" #include <qwidget.h> #include "define.h" #include &…

Nginx——配置部署域名服务器路由nginx

文章目录 基本配置报错解决只能通过[域名]:[端口]/[API路径]的方式请求 基本配置 user www-data; worker_processes auto;error_log /var/log/nginx/error.log notice; pid /run/nginx.pid;events {worker_connections 1024; }http {include /etc/nginx/mime…

C. Raspberries

time limit per test 2 seconds memory limit per test 256 megabytes You are given an array of integers a1,a2,…,ana1,a2,…,an and a number kk (2≤k≤52≤k≤5). In one operation, you can do the following: Choose an index 1≤i≤n1≤i≤n,Set aiai1aiai1. F…

Flink学习连载文章8--时间语义

Time的分类 (时间语义) EventTime:事件(数据)时间,是事件/数据真真正正发生时/产生时的时间 IngestionTime:摄入时间,是事件/数据到达流处理系统的时间 ProcessingTime:处理时间,是事件/数据被处理/计算时的系统的时间 EventTime的重要性 假设&#xff0c;你正在去往地下停…

sizeof和strlen区分,(好多例子)

sizeof算字节大小 带\0 strlen算字符串长度 \0之前