[Vue]vue cli (脚手架)(项目的创建与分析)(一)

简介: [Vue]vue cli (脚手架)(项目的创建与分析)

前言

系列文章目录:

[Vue]目录

老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版: https://note.youdao.com/s/5vP46EPC

视频:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1. Vue 脚手架(CLI)

Vue 脚手架(CLI)是 Vue 官方提供的标准化开发工具(开发平台)

Vue 脚手架(CLI)官网

vue cli的特点:

  1. 开箱即用
  2. 基于 webpack
  3. 功能丰富且易于扩展
  4. 支持创建 vue2 和 vue3 的项目

2. Vue CLI 的安装

vue-cli 是基于 Node.js 开发出来的工具,因此需要使用 npm 将它安装为全局可用的工具。

2.1 全局安装 Vue CLI

如果出现下载缓慢可以将下载地址配置为淘宝镜像:

npm config set registry https://registry.npm.taobao.org
npm i -g @vue/cli

2.2 检验是否安装成功

查看 Vue CLI 的版本,检验 Vue CLI 是否安装成功.

vue --version

或者

vue -V

能查看安装的 Vue CLI 的版本,即为安装成功。

3. 使用 Vue CLI 创建项目

Vue CLI 提供了创建项目的两种方式:

  1. 基于命令行的方式创建 vue 项目
vue create 项目名称
  1. 基于可视化面板创建 vue 项目
vue ui

3.1 基于命令行的方式创建 vue 项目

基于命令行的方式创建 vue 项目,可以使用 Vue CLI 提供的默认预设,也可以自己手动进行预设的配置。

如果之前有自己手动进行预设的配置,并且将配置的预设进行保存,也可以选择直接使用之前的预设配置。

3.1.1 使用 Vue CLI 提供的默认预设创建 vue2 项目

vue create vue_my_test1

键盘上下箭头按键进行选择,enter确定选择

进入创建的项目的目录

cd vue_my_test1

运行项目

npm run serve

访问项目页面

http://localhost:8080/

3.1.2 手动配置预设创建 vue2 项目

步骤1:在终端下运行 vue create 命令

vue create vue_my_test2

步骤2:选择要安装的功能

步骤3:选择 vue 的版本

由于选择安装的功能不同,接下来的选择个数会有所不同

步骤5:使用上下箭头选择如何存储插件的配置信息

通常选择把插件的配置信息存储到单独的文件

步骤6:是否将刚才的配置保存为预设

根据需要选择是否保存

项目创建完成

相关文章
|
4天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
39 1
|
15天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
8月前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
82 3
|
8月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
8月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
203 0
|
8月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
158 0
Vue3+Vite+TypeScript常用项目模块详解
|
8月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
|
8月前
|
前端开发 JavaScript Java
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
毕业设计|基于SpringBoot+Vue的科研课题项目管理系统
209 1
|
8月前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
145 0

热门文章

最新文章