vue-cli3 脚手架搭建前端 vue 项目详细过程

2025-06-08 08:24:07

使用vue-cli 搭建 vue 项目,完整过程~~~~~~~~~~~~~~~~

vue-cli3 脚手架搭建前端 vue 项目详细过程

工具/原料

命令行工具:cmder(选择自己喜欢的)

一、搭建项目前的基础学习

1、① 命令在使用命令行工具之前,先学习如何使用,基本的命令代表什么-g 是 --global 的简写-v 是 --version 的简写-S 是 --save 的简写-D 是 --dev 的简写cd xxx 代表进入到本地(电脑)xxx 文件夹中

2、② 包管理器包管理器很多npmyarncnpmpnpm等等,选择安装这里我们使用的是 yarn

二、开始搭建项目

1、① 进入到自己想要放置项目的位置cd 进入到对应的文件夹

vue-cli3 脚手架搭建前端 vue 项目详细过程

2、② vue create my-app开始初始化项目my-app 是项目名称开始初始化项目,这个过程需要做很多选择,就是选择安装自己需要的插件。

vue-cli3 脚手架搭建前端 vue 项目详细过程
vue-cli3 脚手架搭建前端 vue 项目详细过程

3、③ 检查是否初始化成功上面的初始化之后就是搭建好项目了,$ yarn serve # 开启服务,运行网页看到内容就是成功初始化好项目了,

vue-cli3 脚手架搭建前端 vue 项目详细过程

4、④ 项目结构下图是 vue-cli3 搭建的项目的结构树的解析、

vue-cli3 脚手架搭建前端 vue 项目详细过程

三、安装其他插件

1、上面的初始化项目中,vue-cl3 只会让我们选择安装 vue 系列的插件,其他类似 UI 组件的插件都需要我们额外的去安装的

2、① 安装 UI 框架UI 框架很多,选择自己适用的框架来使用$ yarn add element-ui # 下载饿了么 ui 框架,这个框架是 PC 端的$ yarn add iview # 下载 iview 这个 ui 框架,框架都是选择的,选择其一即可。

vue-cli3 脚手架搭建前端 vue 项目详细过程

3、② 下载 http 请求插件http 请求插件也很多,axios,fetch等等,这里我们就使用比较普遍的 axios$ yarn add axios # 使用 yarn

vue-cli3 脚手架搭建前端 vue 项目详细过程

4、③ 下载 less 或 scss如果不希望使用 css ,而是使用 less,scss 等 CSS Pre-processors,那么还可以安装这些

vue-cli3 脚手架搭建前端 vue 项目详细过程
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢