基于coolpi 4b进行Vue开发

大法师

什么是Vue

Vue是一个开源的javascript框架，Vue.js 的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，Vue.js库的体积非常小的，并且不依赖其他基础库。

nodejs环境依赖安装 https://nodejs.org/en/download

Using Ubuntu

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - && sudo apt-get install -y nodejs

Using Debian, as root

curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt-get install -y nodejs

安装完成，检查node版本

coolpi@coolpi:~/Desktop$ sudo apt-get install -y nodejs
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
The following packages were automatically installed and are no longer required:
  libjs-highlight.js libnode72
Use 'sudo apt autoremove' to remove them.
The following packages will be REMOVED:
  nodejs-doc
The following packages will be upgraded:
  nodejs
1 upgraded, 0 newly installed, 1 to remove and 20 not upgraded.
1 not fully installed or removed.
Need to get 29.4 MB/29.5 MB of archives.
After this operation, 183 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_20.x jammy/main arm64 nodejs arm64 20.5.1-deb-1nodesource1 [29.4 MB]
Fetched 29.4 MB in 25s (1163 kB/s)                                                                                                                                                                         
debconf: delaying package configuration, since apt-utils is not installed
(Reading database ... 144589 files and directories currently installed.)
Removing nodejs-doc (12.22.9~dfsg-1ubuntu3) ...
(Reading database ... 144410 files and directories currently installed.)
Preparing to unpack .../nodejs_20.5.1-deb-1nodesource1_arm64.deb ...
Unpacking nodejs (20.5.1-deb-1nodesource1) over (12.22.9~dfsg-1ubuntu3) ...
Setting up nodejs (20.5.1-deb-1nodesource1) ...
Processing triggers for man-db (2.10.2-1) ...
coolpi@coolpi:~/Desktop$ node -v
v20.5.1
coolpi@coolpi:~/Desktop$

创建一个 Vue 应用

coolpi@coolpi:~/Desktop$ mkdir project
coolpi@coolpi:~/Desktop$ cd project/
coolpi@coolpi:~/Desktop/project$ npm create vue@latest
Need to install the following packages:
  create-vue@3.7.3
Ok to proceed? (y) y

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 /home/coolpi/Desktop/project/vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

npm notice 
npm notice New major version of npm available! 9.8.0 -> 10.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.0.0
npm notice Run npm install -g npm@10.0.0 to update!
npm notice 
coolpi@coolpi:~/Desktop/project$
coolpi@coolpi:~/Desktop/project$ ls
vue-project
coolpi@coolpi:~/Desktop/project$ cd vue-project/
coolpi@coolpi:~/Desktop/project/vue-project$ ls
README.md  index.html  package.json  public  src  vite.config.js
coolpi@coolpi:~/Desktop/project/vue-project$ npm install

added 25 packages, and audited 26 packages in 15s

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

found 0 vulnerabilities
coolpi@coolpi:~/Desktop/project/vue-project$ npm run dev

> vue-project@0.0.0 dev
> vite


  VITE v4.4.9  ready in 378 ms

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