物业公司网站设计营销技巧在线完整免费观看
一、项目构建环境准备
在构建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 管理的项目，可以通过该文件来添加项目说明 |
至此基于Vue-CLI2.x 模板脚手架搭建的vue2.x项目就分享结束啦，希望对大家有所帮助