正文

vue3学习笔记01：使用npm方法安装vue3(代码片段)

howard2005  howard2005  2022-12-03  431

关键词：

文章目录

一、使用淘宝NPM镜像
二、使用CNPM安装Vue最新稳定版
三、使用vue init创建Vue项目
四、使用Vite创建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? (recom

mended) npm

   vue-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. Please
 use 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 not
 recommended 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 updates
 since 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.js

Current existing ChromeDriver binary is unavailable, proceding with download and
 extraction.
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 "tryrequire('./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/zloirock

Also, 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 "tryrequire('./_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.js

npm 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.944s


Running 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-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

C:\\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学习总结笔记(十四)(代码片段)

文章目录1.Vue3之生命周期2.Vue3之自定义hook函数3.Vue3之toRef和toRefs的使用4.Vue3之shallowReactive和shallowRef函数API5.Vue3之readonly函数和shallowReadonly函数6.Vue3之toRaw和markRaw函数使用7.Vue3之customRef函数使用8.Vue3之provide和inject函数使用8.Vue 查看详情

vue3学习笔记02：vue3打包(代码片段)

...目首页一、打包Vue项目（一）查看Vue项目在【Vue3学习笔记01】里创建了Vue3项目vue3-demo（二）打包Vue项目进入项目目录vue3-demo，执行命令cnpmrunbuild执行完查看详情

vue3学习随便记1(代码片段)

安装|Vue.js官网文档提到4种安装方式：在页面CDN包的形式导入下载JavaScript文件放到自己网站再引入使用npm安装使用官方cli构建项目除了第3种，似乎我都稍微用过一下，第1、2种方式是在网站的局部使用vue（第一种... 查看详情

vue3学习随便记1(代码片段)

vue3学习总结笔记(十三)(代码片段)

文章目录1.Vue3简介2.创建Vue3项目工程2.1使用Vue-cli创建2.2使用Vite创建Vue3工程3.Vue3之分析工程结构3.Vue3之安装开发者工具4.Vue3之setup5.Vue3之ref函数5.1ref函数处理基本数据类型5.2ref函数处理对象类型6.Vue3之reactive函数7.Vue3之与vue2进行... 查看详情

vue3学习总结笔记(十三)(代码片段)

vue3学习笔记——axios的使用有变化吗？(代码片段)

本篇文章主要目的就是想告诉我身边，正在学vue3或者准备学vue3的同学，vue3中网络请求axios该如何使用，防止接触了一点点vue3的同学会有个疑问？生命周期、router、vux使用都改变了，那axios使用有没有啥改变&#x... 查看详情

vue3源码逐行解析(代码片段)

...来有一段时间了。今天正式开始记录一下vue3.0.0-beta源码学习心得。本文编写于2020-06-10，脚手架使用vite-app版本0.20.0，内置vue3.0.0-beta.14。ps:可能大部分人都不清楚vue3的开发api，将源码之前先讲述使用方法环境搭建最容易搭建vue3... 查看详情

vue3视频学习笔记(代码片段)

...目前支持vue3.0的ui组件库：ant-design-vueelement-plusvant等学习的路线主要是vue3.0文档二、vite的使用vite是一个原生ESM驱动的web开发构建工具，在开发环境下基于浏览器原生ESinports开发可以用于快速构建查看详情

vue3学习笔记

对外暴露属性(defineExpose)<scriptsetup>的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用defineExpose <scriptsetup> 语法糖并不是新增的功能... 查看详情

vite+vue3+pinia学习笔记(代码片段)

项目中安装piniayarnaddpinia#或者使用npmnpminstallpinia//main.js中引入importcreateAppfrom'vue';importAppfrom'./App.vue';constapp=createApp(App);//vue使用piniaimportcreatePiniafrom"pinia"a 查看详情

在vue3项目中使用新版高德地图(代码片段)

...，升级之后所申请的key必须配备安全密钥 jscode 一起使用NPM方式安装和使用(基础版): 按NPM方式安装使用Loader:npmi@amap/amap-jsapi-loader--save 在页面中通过NPM方式安装的使用:<template><divclass="ap... 查看详情

vue3学习笔记（9.3）(代码片段)

Vue3表单我们可以用v-model指令在表单<input>、<textarea>及<select>等元素上创建双向数据绑定。v-model会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单的value、checked、selected属性的初始值，使用的... 查看详情

尚硅谷vue系列教程学习笔记（14）(代码片段)

尚硅谷Vue系列教程学习笔记（14）参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7笔记上传说明：上述课程中共... 查看详情

尚硅谷vue系列教程学习笔记（14）(代码片段)

[vue3]npm创建环境(代码片段)

1.npm安装vuecli[root@Python20230401VUE3]#npminstall-g@vue/cli2.查看vue版本[root@Python20230401VUE3]#vue--version@vue/cli5.0.83.创建项目[root@Python20230401VUE3]#vuecreatehello-world4.执行项目$cdhello-world$npmrunserveApprunningat:-Local:http://localhost:8080/-Network:http://10.105.212.... 查看详情

vue3.0正式版来了

...ue-devtools/blob/dev/packages/shell-electron/README.md出于原型制作或学习目的，您可以将最新版本与以下各项配合使用：使用Vue构建大型应用程序时，建议使用NPM安装方法。它与Webpack或Rollup等模块捆绑器很好地配对。Vue还提供了用于创作... 查看详情

vue3视频播放插件vue3-video-play的具体使用方法(代码片段)

...0c;就索性把这个视频播放器插件修改成了vue3版，最终使用vite2+vue3开发插件Github地址 vue-video-player先看一下这个播放器(vue3-video-play)的界面吧vue3-video-play视频播放插件基于原生的HTML5的<video> 标签开发，所以支持的... 查看详情