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

2025-06-08 07:59:23

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

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

工具/原料

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

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

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

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

3、③ 全愁抉痊歪局安装 vue-clinpm install vue-cli -g先把脚手架安装上,查看是否安装成功vue -V查看到版本的话就是安装成功了

二、开始搭建项目

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

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

2、② 初始化项目vue init webpack projectname

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

3、④ cd 进入项目cd projectname

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

4、⑤ 安装依赖yarn

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

5、⑥ 运行项目yarn run dev浏览器打开对应地址,就搭建成功了

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

6、⑦ 项目结构下图是项目结构树解析

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

二、安装其他插件

1、vue-cli 搭建的项目,只是一个项目框架,什么插件多没有,所有的插件都需要自己去安装

2、① 安装 状态管理器 vuex如果需要使用到状态管理器的话,就安装状态管理器yarn add vuex

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

3、② 安装 ui 组件$ cnpm iinstall element-ui --save # 下载饿了么 ui 框架,唁昼囫缍这个框架是 PC 端的$ cnpm install iview --save # 下载 iview 这个 ui 框架,框架都是选择的,选择其一即可。选择适合自己的 UI 组件安装使用

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

4、③ 安装 http 请求插件http 插件很多,这里我们选择 axiosyarn add axios

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