Vue-cli 3.X 构建工具零基础快速上手

文章目录

一、环境准备
- 1. 安装node
- 2. 配置镜像
二、安装Vue CLI
- 2.1. 查看当前vuecli版本
- 2.2. 安装最新版本
- 2.3. 安装指定版本
三、创建web项目
- 3.1. 指定创建的项目名称
- 3.2. 安装序列图
- 3.3. 安装序列图简述

一、环境准备

声明：命令均在在cmd窗口执行

1. 安装node

2. 配置镜像

# 显示当前的镜像网址
npm get registry# 使用淘宝的镜像网址
npm config set registry https://registry.npm.taobao.org/

二、安装Vue CLI

2.1. 查看当前vuecli版本

# 查看Vue Cli版本
vue --version

2.2. 安装最新版本

npm install -g @vue/cli

2.3. 安装指定版本

npm install -g @vue/cli@4.5.9

三、创建web项目

3.1. 指定创建的项目名称

# 格式：vue create  项目名称
vue create web

3.2. 安装序列图

3.3. 安装序列图简述

Vue CLI v4.5.9
┌──────────────────────────────────────────┐
│                                          │
│   New version available 4.5.9 → 4.5.12   │
│     Run npm i -g @vue/cli to update!     │
│                                          │
└──────────────────────────────────────────┘# 选择创建方式，第一次建议使用手动
? Please pick a preset: Manually select features# 选择一些模板组件 router：页面路由 vuex：用于全局变量  Linter：代码校验
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter# 选择vue版本
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)# 是否使用类模板
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No# 访问user页面，地址栏不一样，history：xxx/user   hash:xxx/#/user
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes# EsLint:用于检查，代码规范，双刃剑
? Pick a linter / formatter config: Basic# 什么时候校验代码，在保存的时候
? Pick additional lint features: Lint on save# router等配置是放到单独的文件还是一起放到package.json
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files# 是否将这些配置保存为一个模板，方便下一次使用
? Save this as a preset for future projects? Yes#保存为模板的名称
? Save preset as: wiki# 进入web项目
C:\Users\Administrator.DESKTOP-I5SJ4CK\Desktop>cd web# 启动web项目
C:\Users\Administrator.DESKTOP-I5SJ4CK\Desktop\web>npm run serve# 访问web项目
http://localhost:8080/

视频链接：
Vue-cli 3.X 构建工具零基础快速上手

Vue-cli 3.X 构建工具零基础快速上手相关推荐

零基础快速上手CANoe
零基础快速上手CANoe 前言什么是CANoe CANoe的工作原理一. 如何新建一个工程二. 如何发送报文 2.1 尝试发送报文 2.2 DBC文件的使用三. 报文的录制与回放 3.1 使用 ...
Premiere 零基础快速上手教程
关注并星标"高级农民工" 回复"视频"可获取视频剪辑软件和教程在前几天的文章中,我分享了几款主流视频剪辑软件: 最主流的视频剪辑软件简单来说就是,手机端用「 ...
Excel之VLOOKUP函数（零基础快速上手）
目录 VLOOKUP介绍 VLOOKUP快速上手需求描述需求实现常见问题问题一: 问题二: 问题三: VLOOKUP介绍 VLOOKUP函数是Excel中的一个纵向查找函数,在工作中都有广泛应 ...
Three.js 入门2 零基础快速上手（地球和月亮示例）
threejs官网:https://threejs.org/ 版本更迭很快,我用的r104 复制粘贴出效果 <!DOCTYPE html> <html> <head> ...
Git | 一文带你零基础快速上手Git
零基础快速打造一个属于自己的微信聊天工具
" 零基础快速打造一个属于自己的微信聊天工具" 打开微信,我们可以和别人进行聊天,发送消息.非常方便,那微信是怎么来的呢?这个本质的问题让人突发奇想,我们能不能做一个属于自己的微 ...
Vue的新型前端构建工具Vite怎么用
本文小编为大家详细介绍"Vue的新型前端构建工具Vite怎么用",内容详细,步骤清晰,细节处理妥当,希望这篇"Vue的新型前端构建工具Vite怎么用"文章能帮助 ...
ROS2零基础快速入门
ROS2入门最快需要多少时间?3天: ROS2开发一款基础机器人需要多久?3个星期: ROS2怎么才能算"精通"?不可能,3年也不行-- 如何判断一款通用性软件成熟并可以投入精力去 ...
零基础快速入门SpringBoot2.0教程（三）
一.SpringBoot Starter讲解简介:介绍什么是SpringBoot Starter和主要作用 1.官网地址:https://docs.spring.io/spring-boot/doc ...

Vue-cli 3.X 构建工具零基础快速上手

文章目录

一、环境准备

1. 安装node

2. 配置镜像

二、安装Vue CLI

2.1. 查看当前vuecli版本

2.2. 安装最新版本

2.3. 安装指定版本

三、创建web项目

3.1. 指定创建的项目名称

3.2. 安装序列图

3.3. 安装序列图简述

Vue-cli 3.X 构建工具零基础快速上手相关推荐

最新文章

热门文章