文章目录

一、使用淘宝NPM镜像
- （一）为何使用淘宝镜像
- （二）安装淘宝NPM镜像
- （三）查看淘宝NPM镜像版本
二、使用CNPM安装Vue最新稳定版
- （一）安装Vue最新稳定版
- （二）查看Vue命令行工具vue-cli版本
- （三）安装全局插件 - @vue/cli-init
三、使用vue init创建Vue项目
- （一）初始化Vue项目
- （二）运行Vue项目
- （三）浏览器查看应用运行结果
四、使用Vite创建Vue项目
- （一）Vite简介
- （二）利用Vite创建Vue项目
- （三）运行Vue项目
- （四）浏览器查看应用运行结果

一、使用淘宝NPM镜像

（一）为何使用淘宝镜像

国内直接使用npm官方镜像非常慢，推荐使用淘宝NPM镜像，它是一个完整npmjs.org镜像，可用此代替官方版本（只读），目前同步频率为10分钟1次，保证尽量与官方服务同步。

（二）安装淘宝NPM镜像

安装淘宝定制的cnpm，代替替默认的npm
执行命令：npm install -g cnpm --registry=https://registry.npmmirror.com

（三）查看淘宝NPM镜像版本

执行命令：cnpm -v，目前版本是7.1.1

二、使用CNPM安装Vue最新稳定版

在用 Vue.js 构建大型应用时推荐使用cnpm安装，能很好地和Webpack或Browserify模块打包器配合使用

（一）安装Vue最新稳定版

执行命令：cnpm install vue@next

（二）查看Vue命令行工具vue-cli版本

执行命令：vue --version
对于Vue 3，至少应该使用npm上可用的Vue CLI v4.5作为@vue/cli
如果vue cli版本不满足Vue3的条件，那么执行vue upgrade --next升级到最新稳定版

（三）安装全局插件 - @vue/cli-init

执行命令：cnpm i -g @vue/cli-init

三、使用vue init创建Vue项目

（一）初始化Vue项目

执行命令：vue init webpack vue3-demo

C:\Users\Administrator>vue init webpack vue3-demo? Project name vue3-demo
? Project description a Vue.js project
? Author howard2005
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recommended) npmvue-cli · Generated "vue3-demo".# Installing project dependencies ...
# ========================npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser
. This package will no longer receive updates.
npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Pleaseuse eslint-webpack-plugin
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use ht
tps://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and notrecommended for usage due to the number of issues. Because of the V8 engine whi
ms, feature detection in old core-js versions could cause a slowdown up to 100x
even if nothing is polyfilled. Please, upgrade your dependencies to the actual v
ersion of core-js.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Br
owserslist >3.0 config used in other tools.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://git
hub.com/request/request/issues/3142
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `ug
lify-js` as of v3.13.0
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updatessince 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and n
ew features!
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older v
ersions may use Math.random() in certain circumstances, which is known to be pro
blematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer suppor
ted. Please update to mkdirp 1.x. (Note that the API surface has changed to use
Promises in 1.x.)
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JS
ON 3
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and coul
d be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility fra
meworks such as lodash.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, fl
atted is its successor.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Bro
wserslist >3.0 config used in other tools.
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrad
e to v2.x.x.
npm WARN deprecated sane@2.5.2: some dependency vulnerabilities fixed, support f
or node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas
t 2.1.6 to avoid a serious bug with socket data flow and an import issue introdu
ced in 2.1.0
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy.new code should use the URLSearchParams API instead.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrad
e to v2.x.x.
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has bee
n deprecated because it extends the now deprecated request package, see https://
github.com/request/request/issues/3142
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/sour
ce-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#dep
recated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprec
ated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-m
ap-url#deprecated> chromedriver@2.46.0 install C:\Users\Administrator\vue3-demo\node_modules\chro
medriver
> node install.jsCurrent existing ChromeDriver binary is unavailable, proceding with download andextraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromed
river_win32.zip
Saving to file: C:\Users\Administrator\AppData\Local\Temp\2.46\chromedriver\chro
medriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path C:\Users\Administrator\vue3-demo\node_modules\chromedrive
r\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\Administrator\vue3-demo\node_mod
ules\chromedriver\lib\chromedriver\chromedriver.exe> core-js@2.6.12 postinstall C:\Users\Administrator\vue3-demo\node_modules\core-
js
> node -e "try{require('./postinstall')}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfill
ing JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Colle
ctive or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a goo
d job -)> es5-ext@0.10.60 postinstall C:\Users\Administrator\vue3-demo\node_modules\es5-
ext
>  node -e "try{require('./_postinstall')}catch(e){}"> uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\Administrator\vue3-demo\nod
e_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modules\sa
ne\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed.You must install peer dependencies yourself.added 1836 packages from 1115 contributors in 104.944sRunning eslint --fix to comply with chosen preset rules...
# ========================> vue3-demo@1.0.0 lint C:\Users\Administrator\vue3-demo
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"# Project initialization finished!
# ========================To get started:cd vue3-demonpm run devDocumentation can be found at https://vuejs-templates.github.io/webpackC:\Users\Administrator>

（二）运行Vue项目

进入项目，执行命令：cnpm run dev

（三）浏览器查看应用运行结果

访问http://localhost:8080

四、使用Vite创建Vue项目

（一）Vite简介

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
使用 Vite 快速构建 Vue 项目的语法格式：npm init vite-app <project-name>

（二）利用Vite创建Vue项目

执行命令：npm init vite-app vue3-demo2

（三）运行Vue项目

进入项目目录vue3-demo2，执行命令：npm install
执行命令：npm run dev

（四）浏览器查看应用运行结果

访问http://localhost:3000
访问http://192.168.214.112:3000/

Vue3学习笔记01：使用NPM方法安装Vue3相关推荐

Webpack4 学习笔记 - 01：webpack的安装和简单配置
安装 webpack 新建一个Demo文件夹,执行初始化: npm init 在Demo文件夹里安装 webpack 和 webpack-cli : npm install webpack webpa ...
【zepto学习笔记01】核心方法$()
前言我们移动端基本使用zepto了,而我也从一个小白变成稍微靠谱一点的前端了,最近居然经常要改到zepto源码但是,我对zepto不太熟悉,其实前端水准还是不够,所以便私下偷偷学习下吧,别被发现了 ...
学习笔记(01):Oracle数据库-Oracle安装与配置
立即学习:https://edu.csdn.net/course/play/3574/62057?utm_source=blogtoedu oracle笔记
【虚幻4/UE4】学习笔记01——软件介绍、安装及界面
因为工作需要,一个完全零基础的小白开始学习UE4的征途开始啦~ 一.什么是UE4 UE4是一套为游戏开发者设计和构建优先.模拟和可视化的集成工具. 简言之,做游戏的软件. 二.UE4的功能实时逼真渲 ...
Android Studio下载搭建学习笔记01
Android Studio下载搭建学习笔记01 下载Android Studio 安装Android Studio 进入安装向导选择安装组件选择安装位置选择文件菜单等待安装启动并配置And ...
Servlet和HTTP请求协议-学习笔记01【Servlet_快速入门-生命周期方法、Servlet_3.0注解配置、IDEA与tomcat相关配置】
Java后端学习路线笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
MySQL学习笔记01【数据库概念、MySQL安装与使用】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
PHP学习笔记01：安装PHP开发套件xampp
PHP学习笔记01: 安装PHP开发套件xampp 1.从网上下载xampp7.3.7 2.安装xampp
RN学习笔记01：概述、特点与环境搭建
RN学习笔记01:概述.特点与环境搭建一.RN概述 React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 Reac ...

Vue3学习笔记01：使用NPM方法安装Vue3

文章目录

一、使用淘宝NPM镜像

（一）为何使用淘宝镜像

（二）安装淘宝NPM镜像

（三）查看淘宝NPM镜像版本

二、使用CNPM安装Vue最新稳定版

（一）安装Vue最新稳定版

（二）查看Vue命令行工具vue-cli版本

（三）安装全局插件 - @vue/cli-init

三、使用vue init创建Vue项目

（一）初始化Vue项目

（二）运行Vue项目

（三）浏览器查看应用运行结果

四、使用Vite创建Vue项目

（一）Vite简介

（二）利用Vite创建Vue项目

（三）运行Vue项目

（四）浏览器查看应用运行结果

Vue3学习笔记01：使用NPM方法安装Vue3相关推荐

最新文章

热门文章