YouTip{{ message }}
{{ message }}
{{ message }}
{{ message }}
{{ message }}
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
message: 'Hello TUTORIAL!'
}
}
}).mount('#app')
[Try it »](#)
* * *
## 3. NPM Method
Since npm installation is slow, this tutorial uses Taobao's mirror and its command cnpm. For installation and usage instructions, refer to: (#).
The npm version needs to be greater than 3.0. If it's lower than this version, you need to upgrade it:
# View version
$ npm -v
2.3.0
# Upgrade npm
cnpm install npm -g
# Upgrade or install cnpm
npm install cnpm -g
When building large applications with Vue.js, it is recommended to use cnpm for installation. cnpm works well with Webpack or Browserify module bundlers. Then run the following command in the command line:
# Latest stable version
$ npm init vue@latest
This command will install and execute create-vue, which is Vue's official project scaffolding tool.
$ npm init vue@latest
Need to install the following packages:
create-vue@3.6.1
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
# Here you need to do some configuration, enter the project name tutorial-vue3-test, others can use default by pressing Enter
-> Project name: … tutorial-vue3-test
-> Add TypeScript? … No / Yes
-> Add JSX Support? … No / Yes
-> Add Vue Router for Single Page Application development? … No / Yes
-> Add Pinia for state management? … No / Yes
-> Add Vitest for Unit Testing? … No / Yes
-> Add an End-to-End Testing Solution? › No
-> Add ESLint for code quality? … No / Yes
Scaffolding project in /Users/tutorial/tutorial-test/tutorial-vue3/tutorial-vue3-test...
Done. Now run:
cd tutorial-vue3-test
npm install
npm run dev
If you are not sure whether to enable a certain feature, you can simply press Enter to select No.
After the project is created, install dependencies and start the development server by following these steps:
$ cd tutorial-vue3-test
$ npm install
$ npm run dev
VITE v4.3.4 ready in 543 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
After successfully executing the above commands, visit **http://localhost:5173/**, the output is as follows:
!(#)
> **Note:** Vue.js does not support IE8 and below IE versions.
* * *
## Using GUI
We can use the vue ui command to open a GUI for creating and managing projects:
vue ui
Executing the above command will open a GUI in the browser to guide project creation:
!(#)
* * *
## Vite
Vite is a