Learning Vue to create a Vue application

Vue.js

overview

I plan to learn the front end. I already have some basic knowledge of HTML, js, and CSS. Next, I will learn Vue.js.

The following are some Vue.js tutorials suitable for novices. You can choose the learning resources that suit you according to your actual situation and needs:

Vue.js official documentation : https://cn.vuejs.org/v2/guide/
Vue.js official documentation is one of the best resources for getting started with Vue.js development, including the basic concepts of Vue.js, template syntax, Components, directives, routes, and more.

Vue.js2.0 Complete Development Manual : https://www.zhangxinxu.com/sp/vue2.0/
Teacher Zhang Xinxu’s Vue.js2.0 Complete Development Manual, from the basic syntax of Vue.js to the application of advanced components, all involved.

Vue.js Video Tutorial-MOOC : https://www.imooc.com/learn/1091
This is the Vue.js video tutorial of MOOC, which mainly covers the basic grammar, components, instructions, routing, state management etc.

Vue.js development practice - You Yuxi : https://ustbhuangyi.github.io/vue-analysis/
This is the Vue.js development practice tutorial of Mr. You Yuxi, from the basic grammar of Vue.js to source code analysis Involved, it can be suitable for developers who have a certain Vue.js foundation and want to know more about it.

The above are some commonly used Vue.js tutorials and learning resources, I hope they will be helpful to you, and I wish you a happy learning!

Got it Vue

There is a documentary about the birth of vue on YouTube: https://www.youtube.com/watch?v=OrxmtDw4pVI , a video of more than 30 minutes, after watching you will have a deeper understanding of vue.

Create a Vue application

1. Install Node.js, >= 16.0.

2. Create a file demo

cd to the file directory

cd /Users/morris/Desktop/demo

3. create project

npm init vue@latest

Enter all the way, and then a vue-projectproject and a package-lock.jsonconfiguration file will be generated

4. Startup project

cd vue-project
npm install
npm run dev

At this time, the project has been created and started, and http://localhost:5173/the following page can be opened by typing in the browser.

The entire command is as follows:

➜  ~ cd /Users/morris/Desktop/demo 
➜  demo ls
➜  demo npm init vue@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) 
(#########⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠋ reify:create-vue: sill audit bulk request { 'create-vue': [ '3.6.4' ] }

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ 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/morris/Desktop/demo/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

npm notice 
npm notice New minor version of npm available! 9.6.4 -> 9.7.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.1
npm notice Run npm install -g [email protected] to update!
npm notice 
➜  demo npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/morris/Desktop/demo/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/morris/Desktop/demo/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in: /Users/morris/.npm/_logs/2023-06-12T05_24_55_918Z-debug-0.log

➜  demo cd vue-project
➜  vue-project npm install

added 26 packages, and audited 27 packages in 48s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  vue-project npm run dev

> [email protected] dev
> vite


  VITE v4.3.9  ready in 799 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
➜  vue-project npm run dev

> [email protected] dev
> vite


  VITE v4.3.9  ready in 262 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Open the project with vscode:

reference

[1] Create a Vue application: https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application