如何使用vue-cli脚手架快速部署工程化项目

如何使用vue-cli脚手架快速部署工程化项目

为什么需要工程化的原因：

• 模块化开发： 工程化允许开发者将整个项目划分为小的模块，每个模块专注于特定的功能。这种模块化开发使得代码更易于组织、维护和重用。
• 自动化构建： 工程化工具可以自动执行诸如代码编译、压缩、合并、打包等任务，简化了繁琐的手动操作，提高了开发效率。
• 包管理： 使用包管理工具（例如 npm、Yarn）能够方便地管理项目所需的第三方库和工具，确保版本的一致性，并简化依赖关系的管理。
• 实时预览和热更新： 一些工程化工具支持实时预览和热更新，使开发者能够在保存代码后立即看到变化，提高开发体验。
• 团队协作： 工程化规范了项目的结构和流程，使得团队成员之间更容易协作，降低了理解和维护代码的难度。
• 代码规范和风格检查： 工程化工具可以集成代码规范和风格检查，帮助团队确保代码质量和一致性，减少潜在的错误。

总结：将项目工程化使得开发更加高效、可维护，并能够适应复杂的项目需求和团队协作

‍

准备环境：

vue-cli是Vue官方提供的一个脚手架（脚手架指的是一个工具），它可以帮助你快速搭建项目的基础框架和目录结构，并提供一些预设配置，使得你能够更轻松地开始编写代码而不必从零开始；这个脚手架依赖NodeJS环境。所以我们要去NodeJS官网安装NodeJS环境。

NodeJS官网：节点.js (nodejs.org)

下载这个长期维护版就行

​

1. 安装步骤没什么好说的，进去之后下一步，同意协议，然后找一个安装目录，然后一直下一步就行了。

2. NodeJS安装完成后，会自动配置好环境变量，输入node -v​查看版本，如果显示成功就是环境变量配置成功了。

​

3. 配置npm的全局安装路径

   以管理员身份打开cmd，在cmd中输入

   npm config set prefix "D:\Gong\NodeJS"  //这里要写的是你自己的安装路径
   npm config get prefix   //输入这条命令检测你配置成功与否，如下图就是成功的样子
   

​

4. 切换镜像，提高后面的下载速度

   npm config set registry https://registry.npm.taobao.org   //同样以管理员身份运行  不报错就是按照成功了
   

5. 按照Vue-cli脚手架

   npm install -g @vue/cli   //管理员身份运行
   vue --version  //能看到版本号就是安装成功了
   

​​​​​​

‍

环境安装完成，开始部署项目。部署的方式有两种，可以用命令行也可以用图形化。

‍

命令行的部署方式： vue create 项目名 （你在什么路径输入的这个命令，项目就创建在什么路径下面）

图形化的部署方式： vue ui（命令行里输入这条命令，会启动本地一个端口服务）

‍

命令行的部署方式

如下图 我输入vue create vue-project命令行，提示我选择vue3 还是2，通过上下键选择即可。

​

‍

我选择了2过后按回车，项目就开始自动创建了，等待即可。时间有点长

​

这样子就是部署成了。

​​​

运行方式npm run serve​

ctrl+鼠标点击这个链接查看网页，也可以浏览器输入地址访问

​

‍

初始样子：

​​

ctrl+c 关闭项目运行

​​

‍

ui界面部署方式

输入 vue ui​ 就会弹出一个ui界面了，如下图：

​​

输入创建的路径，点击创建

​​

输入项目名称，选择包管理器，要不要Git自己选吧，不懂就取消勾选就是。然后下一步

​​

这点我们选手动配置项目，然后下一步

​​

有什么需求就勾什么需求，没有的话默认下一步

​​

我这里选的2.x版本，代码风格选的第一个，看你自己。然后点击创建项目

​

‍

可以不保存规则，直接创建。同样等待创建时间就好了，一样时间挺久的，等着就行。

​

‍

创建好之后：

​​

然后你就可以看到你刚才指定的路径下出现了部署出来的项目了，可以用VScode打开，用里面的NPM脚本运行，或者用上面说的，用命令运行项目 取决于你。

​​

‍

最后在说一下，脚手架自动部署的工程下面的每个文件夹和文件的意义：

my-vue-project/           # 项目根目录
│
├── public/                # 公共资源目录
│   ├── index.html         # 应用的 HTML 入口文件
│   └── favicon.ico        # 网站图标
│
├── src/                   # 源代码目录
│   ├── assets/            # 静态资源目录（图片、样式、字体等）
│   ├── components/        # Vue 组件目录
│   ├── views/             # 视图组件目录
│   ├── router/            # 路由配置目录
│   ├── store/             # Vuex 状态管理目录
│   ├── main.js            # 应用入口文件
│   └── App.vue            # 根组件文件
│
├── node_modules/          # 项目依赖的 npm 包
│
├── .gitignore             # Git 版本控制忽略文件配置
├── babel.config.js        # Babel 配置文件
├── package.json           # 项目配置文件（包含项目名称、依赖等信息）
├── package-lock.json      # 锁定依赖版本的文件（npm 5+ 自动生成）
└── README.md              # 项目说明文件

‍

感谢观看，谢谢！

‍