两种方式使用VueCli快速构建Vue项目

最新推荐文章于 2025-07-02 00:15:00 发布

原创最新推荐文章于 2025-07-02 00:15:00 发布 · 981 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#可视化 #vue

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Vue CLI快速构建Vue项目，包括通过命令行和Vue UI可视化界面两种方式。Vue CLI简化了项目配置，让开发者更专注于功能实现。详细阐述了安装Vue CLI、创建项目、项目结构以及打包部署的步骤，同时也对比了命令行与可视化的区别。

vue cli脚手架使用

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。

Vue Cli提供了以一种简单的方式来构建Vue项目，在Vue下，所有的配置，例如：loader，打包配置等，都不再需要手动安装管理。
自己使用webpack也可以搭建Vue项目，但是很多配置都需要手动安装和手写配置文件，相对来说，Vue-Cli大大简化了这个配置过程，使前端人员能够更加专注于功能页面的实现。

Vue cli的安装与常用指令

前置环境：安装node.js与配置node环境

node.js下载地址

检测npm是否安装成功

npm -v

查看当前已安装包
```
npm list -g --depth 0
```

卸载脚手架

npm uninstall -g @vue/cli  //卸载3.x版本脚手架
npm uninstall -g vue-cli  //卸载2.x版本脚手架

安装脚手架

npm install @vue/cli -g		//vue3.x版本
npm install vue-cli -g		//vue2.x版本

安装构建项目指令
```
npm install @vue/cli-init -g
```

这些步骤完成后，就可以使用vue-cli脚手架进行开发了。

Vue项目的简单搭建

第一种方式：使用命令行方式建立

cmd进入存放项目文件夹
创建项目
```
vue init webpack 项目名
```
创建完成后，项目存放处将会出现我们的项目。
选择编辑器打开项目。
启动项目

在编辑器的终端中输入
```
npm start
//或者
npm run dev
```
local host:8080查看页面效果。

第二种方式：使用Vue UI可视化界面建立。

从vue-cli@3.0版本之后，vue-cli提供了用于创建项目的可视化界面，用户可以使用这个可视化界面更加直观和简洁的使用脚手架构建项目，但是其本质上他们都是一样的。

启动可视化界面

在cmd窗口输入指令
```
vue ui
```
浏览器输入路径地址

localhost:8000

进入ui页面
选择项目创建，自定义路径创建项目
项目的个性化设置
- 设置文件名和包管理工具和git仓库初始化
- 设置预设，可以使用之前项目的模板，也可以手动配置
- 增加一些依赖插件（也可以在后续项目中添加）选择router和配置文件保存即可
- 设置编码风格
  
  选择立刻保存与代码检查ESLlink+Standard config
- 创建成功
下载安装依赖

可以根据自己的需求安装所需要的依赖

根据依赖选择开发依赖或者生产依赖
下载安装插件
启动项目
输入localhost:8080即可查看页面效果
将项目导入编辑器即可修改。

两种创建方式的本质上都是一样的，可视化的每一个步骤底层都有一个相对应的命令去实现它。同时，可视化页面的每一个操作我们都能用命令行的方式自行去实现它。可视化只是做了一个页面效果和命令行自动生成的效果。

Vue项目结构

下面展示两个目录结构分别用vue-cli的可视化界面建立和使用命令行的方式建立。

他们的项目结构有一些不同，但只是vue-cli可是化界面将一些webpack和config配置隐藏起来了。因为可视化界面操作下，这些配置文件由底层代码自动更改。所以不需要用户手动去修改配置文件。

而一些不可或缺的需要手动选择的配置项则放在public中给予支持。

	-hello     -------------> 项目名
    -build     -------------> 用来使用webpack打包使用build依赖
    -config    -------------> 用来做整个项目配置目录
    -node_modules     ------> 用来管理项目中使用依赖
    -src			  ------> 用来书写vue的源代码[重点]
      assets          ------> 用来存放静态资源 [重点]
      components      ------> 用来书写Vue组件 [重点]
      router		  ------> 用来配置项目中路由[重点]
      App.vue         ------> 项目中根组件[重点]
      main.js         ------> 项目中主入口[重点]
    -static           ------> 其它静态
    -.babelrc         ------> 将es6语法转为es5运行
    -.editorconfig    ------> 项目编辑配置
    -.gitignore       ------> git版本控制忽略文件
    -.postcssrc.js    ------> 源码相关js
    -index.html       ------> 项目主页
    -package.json     ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json  ----> 对package.json加锁
    -README.md          ----> 项目说明文件