It is very slow to directly use the official npm image in China. It is recommended to use the Taobao NPM image. It is a complete npmjs.orgimage and can be used instead of the official version (read-only). The current synchronization frequency is once every 10 minutes, and it is guaranteed to synchronize with the official service as much as possible.
(2) Install Taobao NPM image
Install Taobao customized cnpminstead of the default onenpm
Excuting an order:npm install -g cnpm --registry=https://registry.npmmirror.com
(3) View Taobao NPM image version
Execute the command: cnpm -v, the current version is 7.1.1
Second, use CNPM to install the latest stable version of Vue
Installation is recommended when building large applications with Vue.js cnpmand works well with Webpackor Browserifymodule bundlers
(1) Install the latest stable version of Vue
Excuting an order:cnpm install vue@next
(2) View the vue-cli version of the Vue command line tool
Excuting an order:vue --version
For Vue 3, you should at least use npmthe available on Vue CLI v4.5as@vue/cli
If the vue cli version does not meet the conditions of Vue3, then perform an vue upgrade --nextupgrade to the latest stable version
(3) Install the global plugin - @vue/cli-init
Excuting an order:cnpm i -g @vue/cli-init
3. Create a Vue project with vue init
(1) Initialize the Vue project
Excuting an order: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 `npminstall`for you after the project has been created? (recom
? Should we run `npminstall`for you after the project has been created? (recom
mended)npm
vue-cli · Generated "vue3-demo".# Installing project dependencies ...# ========================npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser
. This package will no longer receive updates.
npm WARN deprecated [email protected]: This loader has been deprecated. Please
use eslint-webpack-plugin
npm WARN deprecated [email protected]: Deprecated. Please use ht
tps://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: out of support
npm WARN deprecated [email protected]: 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 [email protected]: Browserslist 2 could fail on reading Br
owserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: request has been deprecated, see https://git
hub.com/request/request/issues/3142
npm WARN deprecated [email protected]: support for ECMAScript is superseded by `ug
lify-js` as of v3.13.0
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates
since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and n
ew features!npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: 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 [email protected]: 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 in1.x.)npm WARN deprecated [email protected]: Please use the native JSON object instead of JS
ON 3npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and coul
d be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility fra
meworks such as lodash.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, fl
atted is its successor.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Bro
wserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrad
e to v2.x.x.
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support f
or node <10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: 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 in2.1.0
npm WARN deprecated [email protected]: The querystring API is considered Legacy.
new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrad
e to v2.x.x.
npm WARN deprecated [email protected]: use String.prototype.padStart()npm WARN deprecated [email protected]: 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 [email protected]: See https://github.com/lydell/sour
ce-map-resolve#deprecatednpm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#dep
recated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprec
ated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-m
ap-url#deprecated>[email protected]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
>[email protected] 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/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a goo
d job -)>[email protected] postinstall C:\Users\Administrator\vue3-demo\node_modules\es5-
ext
> node -e "try{require('./_postinstall')}catch(e){}">[email protected] 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 [email protected] requires a peer of ajv@^5.0.0 but none is installed.
You must install peer dependencies yourself.
added 1836 packages from 1115 contributors in104.944s
Running eslint --fix to comply with chosen preset rules...
# ========================>[email protected] 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>
(2) Running the Vue project
Enter the project and execute the command:cnpm run dev
(3) Browser to view the running result of the application
accesshttp://localhost:8080
Fourth, use Vite to create a Vue project
(1) Introduction to Vite
Vite is a web development build tool that enables lightning-fast cold server startup due to its native ES module import method.
The syntax format for quickly building a Vue project with Vite:npm init vite-app <project-name>
(2) Use Vite to create a Vue project
Excuting an order:npm init vite-app vue3-demo2
(3) Running the Vue project
Enter the project directory vue3-demo2and execute the command:npm install
Excuting an order:npm run dev
(4) Browser to view the running result of the application
