§2023-08-09

-Vue.js QuickStart

-　試験機器： x8664Arch.yushei.com.tw, /opt/xfs/vue-proj

 node --version
v20.4.0
[alexlai@x8664Arch vue-proj]$ which node
/usr/bin/node
[alexlai@x8664Arch vue-proj]$ which npm
/usr/bin/npm
[alexlai@x8664Arch vue-proj]$ npm --version
9.8.1

$ npm create vue@latest
Need to install the following packages:
create-vue@3.7.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … quickStart
✔ Package name: … quickstart
✔ 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 /opt/xfs/vue-proj/quickStart...

Done. Now run:

  cd quickStart
  npm install
  npm run dev
$ tree quickStart/
quickStart/
├── index.html
├── package.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── icons
│   │   │   ├── IconCommunity.vue
│   │   │   ├── IconDocumentation.vue
│   │   │   ├── IconEcosystem.vue
│   │   │   ├── IconSupport.vue
│   │   │   └── IconTooling.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   └── main.js
└── vite.config.js

6 directories, 18 files

2. cd quickStart

$ npm install
$ npm run dev

VITE v4.4.9  ready in 1298 ms

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

Shortcuts
  press r to restart the server
  press u to show server url
  press o to open in browser
  press c to clear console
  press q to quit

• http://localhost:5173

Note that the example components in the generated project are written using the Composition API and , rather than the Options API.

In simple terms, the Options API is like using predefined sections to write your component, while the Composition API is like assembling smaller, reusable functions to build your component's behavior in a more flexible way. Both approaches have their merits, and you can choose the one that fits your project and coding style best.

3. When you are ready to ship your app to production, run the following:

$ npm run build

> quickstart@0.0.0 build
> vite build

vite v4.4.9 building for production...
✓ 23 modules transformed.
dist/assets/logo-277e0e97.svg    0.28 kB │ gzip:  0.20 kB
dist/index.html                  0.42 kB │ gzip:  0.28 kB
dist/assets/index-ef4f98ff.css   3.69 kB │ gzip:  1.19 kB
dist/assets/index-393e57c5.js   60.05 kB │ gzip: 23.86 kB
✓ built in 3.96s

$ tree dist
dist
├── assets
│   ├── index-393e57c5.js
│   ├── index-ef4f98ff.css
│   └── logo-277e0e97.svg
├── favicon.ico
└── index.html

4. how to serve contents in ~/dist

$ sudo npm install -g serve
$ which serve
/usr/bin/serve
$ cd dist/
$ serve

   ┌───────────────────────────────────────────┐
   │                                           │
   │   Serving!                                │
   │                                           │
   │   - Local:    http://localhost:3000       │
   │   - Network:  http://192.168.2.132:3000   │
   │                                           │
   │   Copied local address to clipboard!      │
   │                                           │
   └───────────────────────────────────────────┘

• http://localhost:3000

Here are some additional tips:

Return to Top