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

news2024/12/5 2:37:47

一、项目构建环境准备

在构建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.js	webpack 配置文件 - 开发环境和生产环境的通用配置。将基础配置、开发环境和生产环境各对应一个文件比较易于维护
webpack.dev.conf.js	webpack 配置文件 - 开发环境的配置，webpack 打包过程中内容会与 webpack.base.conf.js 合并
webpack.prod.conf.js	webpack 配置文件 - 生产环境的配置，webpack 打包过程中内容会与 webpack.base.conf.js 合并

config 目录内文件介绍

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

src 目录内文件介绍

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

其他文件

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