Vue进阶——Vue CLI

2023-11-12

Vue进阶——Vue CLI

前言

个人学习笔记,本篇主要讲解VueCLI及使用VueCLI创建项目的步骤

一、什么是Vue CLI?

CLI是Command-Line Interface, 翻译为命令行界面;Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,俗称脚手架。它可以帮助开发人员自动化和简化应用程序的开发过程,提供了创建和配置Vue.js项目所需的所有工具和依赖项。Vue CLI允许您选择所需的插件和功能,快速搭建项目架构并开始编写代码。它还提供了开发服务器、构建和打包工具、自动化测试和部署等功能,使得开发人员可以更加高效地构建Vue.js应用程序。

二、怎么安装Vue CLI?

1.Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

于安装目录打开cmd,输入以下任一命令:

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

2.已安装旧版本

旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

如需升级全局的 Vue CLI 包,请输入以下任一命令:

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

3.安装完成

安装完成后你可以用这个命令来检查其版本是否正确:

vue --version

三、Vue CLI 创建Vue项目

1.Vue ui项目创建

打开cmd

vue ui

点击创建并选择适合的路径
在这里插入图片描述
输入项目名,包管理选择默认
在这里插入图片描述

1.1 预设

预设选择手动
在这里插入图片描述

1.2 项目功能

Vuex:是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
Router:Vue中的路由,详情可见Vue Router
Linter/Formatter:可以让你的代码写的更严谨一些,通常是用来做报错提醒的
请添加图片描述

1.3 项目配置

Choose a version of Vue.js that you want to start the project with:你想用Vue的那个版本,这个就看大家的需求了
Use history mode for router? :就默认让它关闭就可以
Pick a linter / formatter config::代码的书写风格(建议选择 ESLint + Standard config)
Pick additional lint features: 一般不用管
请添加图片描述

1.4 保存为预设

是否将这些配置保存为预设
在这里插入图片描述

1.5 导入插件、依赖

推荐导入:
Axios:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
element ui:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库(vue3+ 可以 导入element plus)插件目录
添加插件

1.6 项目运行

于任务中选择serve点击 运行 ,然后点击 启动app 即可
请添加图片描述

2.cmd创建

2.1 创建一个存放项目的文件夹,并于该文件夹打开cmd

在这里插入图片描述
在这里插入图片描述

2.2 创建项目

于cmd中输入 vue create 项目名
在这里插入图片描述

2.3 preset

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性,方向键可以选择模块,这里选择手动选择特性
在这里插入图片描述

2.4 手动选择特性

router和vuex几乎是必选的,可以使用方向键和空格进行选择
在这里插入图片描述

2.5 版本选择

按所需选择
在这里插入图片描述

2.6 保存为模板

是否将该项目保存为模板
在这里插入图片描述

2.7 代码规范

选择语法检测工具
ESLint with error prevention only(只检测错误)
ESLint + Standard config 自带linter和自动代码纠正,没有配置,自动格式化代码,可在编码早起发现规范问题和低级错误
ESLint + Prettier 能统团队的代码风格
在这里插入图片描述

选择语法检查方式
Lint on save (保存就检测)
Lint and fex on commit ( 用户提交文件到git的时候检测 )
在这里插入图片描述

2.8 配置文件存放位置

in dedicated config files(在专用配置文件中,就是单独管理)
in package.json(放在package.json里)
在这里插入图片描述

2.9 保存为未来项目的预配置

在这里插入图片描述

2.10 完成

创建中
在这里插入图片描述
创建完成
在这里插入图片描述

四、拓展

网站常用组件及样式

Vue进阶——Vue Router

Vue进阶——Element Ui

网站Linux服务器环境搭建

五、参考文献

Vue Cli官方文档

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue进阶——Vue CLI 的相关文章

随机推荐

  • 全新的eMPP(Elastic MPP),超越MPP的超弹性架构

    大数据时代 的概念最早由著名咨询公司麦肯锡提出 麦肯锡表示 数据已渗透到今天的每个行业和业务功能领域 并已成为重要的生产要素 数据在精巧的算法中被挖掘 数据分析变得至关重要 大家开始达成一个共识 数据计算 能够找到新发现 博思艾伦咨询公司的
  • 第1174期AI100_机器学习日报(2017-12-05)

    AI100 机器学习日报 2017 12 05 kegra 使用keras通过深度学习构建知识图谱 ChatbotsChina 图数据中的推理 微软亚洲研究院 浅谈NLP中条件语言模型 Conditioned Language Models
  • 第七课:BootRom的烧录

    目录 2 5 烧录BootRom 2 5 1 P2020 e500核 上电启动及boot流程 2 5 2 烧录BootRom到NorFlash 2 5 2 1 CodeWarrior的介绍
  • QT定时器

    QTimer使用 添加头文件 include
  • 推荐一个很适合程序员的副业!

    推荐一个超级赞的副业就是有声书录制 从2013年到现在已经火了9年时间 可谓是源远流长 这个兴趣爱好衍生出来的副业已经承载了上百万小白从业人员 头部主播的年收入都破了百万 有声书录制的发展历程可以概括为 或许曾经混沌 但必定未来可期 判断一
  • windows核心编程-杨波-专题视频课程

    windows核心编程 422人已学习 课程介绍 SDK 软件开发工具包 Software Development Kit SDK 一般是一些被软件工程师用于为特定的软件包 软件框架 硬件平台 作业系统等创建应用软件的开发工具的集合 MFC
  • Go语言基础(一)之函数调用、传参、反射机制、类型断言与转换

    Go语言基础 一 之函数调用 传参 反射机制 1 1 函数调用 package main func myFunction a b int int int return a b a b func main myFunction 66 77 使
  • 观察者模式实践-实现winform 窗体之间传值(事件实现)

    事件本身就是观察者模式的一个实现 先总结一下事件的使用 委托类型声明 定义发布者类 并声明事件 在发布者类中定义触发事件方法 定义订阅者类 并注册事件 在订阅者类中定义事件处理方法 针对事件 Net Framework提供了一个标准模式 主
  • linux epoll 非阻塞,Linux epoll 非阻塞connect

    为什么需要非阻塞connect 建立当前连接与其浪费等待 不如同时做些其它有意义的工作 可以异步建立多个连接 可以借助select epoll等系统调用设置合适的连接超时 而阻塞情况下只得等待默认的超时 网络上的文章大多是使用select来
  • PostgreSQL数据库保存图片

    一 postgresql 数据库的安装和配置 主要用到的命令 安装 PostgreSQL sudo apt get update sudo apt get install postgresql postgresql client 安装完毕后
  • 匿名内部类创建线程的两种方式

    我们知道多线程的实现有两种方式 一种是继承Thread类 另一种是实现Runnable接口 然后再重写run方法 最后开启线程 我们在普通的创建线程中 显然是比较麻烦的 那么有没有一个简单的方法呢 今天给大家介绍使用匿名内部类创建线程 为什
  • js逆向系列:企名片,获取js逆向后的真实数据!

    一 进入企名片创业项目 我们需要爬取如下数据 首先 对该网页进行抓包 发现这些数据是通过post请求获得的 这是网站给我们返回的数据 为什么和网页上显示的不一样呢 分析后得出 这是经过js加密后的数据 为了防止爬虫 网页对数据进行了加密 因
  • 没有50W彩礼,该怎么办

    大家好 我是才哥 刚过完春节 作为到了已婚甚至被催婚年龄的我们也开始讨论一个自古既有的话题 彩礼 今天上午 看到朋友圈刷屏了一个B站UP主的视频 没有50W彩礼 女朋友被强行拖走 我该怎么办 看完视频只想说 https www bilibi
  • Android面经_安卓面经(25/30)之MVC、MVP、MVVM全解析

    系列专栏 安卓高频面经解析大全专栏链接 150道安卓高频面试题全解析 安卓高频面经解析大全目录详情 安卓面经 anroid面经 150道安卓常见基础面试题全解析 安卓系统Framework面经专栏 Android系统Framework面试题
  • Python 5大常用魔术方法汇总

    前言 Python 中 以双下划线 包起来的方法 统称为 魔术方法 Magic Method 魔术方法是一个类或对象中的特殊方法 和普通方法的区别在于 普通方法需要手动调用 而魔术方法是在特定时刻自动触发执行的 如果希望根据自己的程序定制自
  • 开放原子开源基金会秘书长孙文龙:要打造以开发者为本的开源服务平台

    7月28日 2022开放原子全球开源峰会在北京亦创国际会展中心隆重举行开幕式 开放原子开源基金会秘书长孙文龙发表题为 凝心聚力 共拓开源 的演讲 开源开放 应运而生 开放原子开源基金会于2020年6月正式成立 作为我国首家开源基金会 也是目
  • 第一个solidity程序

    一 示例程序 SPDX License Identifier GPL 3 0 pragma solidity gt 0 4 16 lt 0 9 0 contract SimpleStorage uint storedData functio
  • 487. 金明的预算方案

    Powered by NEFU AB IN Link 文章目录 487 金明的预算方案 题意 思路 代码 487 金明的预算方案 题意 略 思路 可以将每个主件及其附件看作一个物品组 记主件为 p 两个附件为 a b 则最多一共有4种组合
  • ftp的passive模式

    昨天调试了半天的ftp passive模式 记录一下 今天在一台测试服务器上搭建ftp 折腾了许久 主要是不了解ftp的passive模式和port模式的区别 这里记录一下 和passive模式对应的叫做port模式 也叫做standard
  • Vue进阶——Vue CLI

    Vue进阶 Vue CLI 前言 一 什么是Vue CLI 二 怎么安装Vue CLI 1 Node 版本要求 2 已安装旧版本 3 安装完成 三 Vue CLI 创建Vue项目 1 Vue ui项目创建 1 1 预设 1 2 项目功能 1