什么是Vue
Vue是一个开源的javascript框架,Vue.js 的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件,Vue.js库的体积非常小的,并且不依赖其他基础库。
Vue官网
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
vue.png