vue学习笔记——1{搭建脚手架}

zhouchao1964

于 2024-07-05 23:07:33 发布

阅读量276

点赞数 3

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/zhouchao1964/article/details/140219654

版权

#自学vue笔记#

1、下载安装vue

官网下载最新版本：Node.js — Download Node.js®
可以下载安装包（安装教程见：Node.js 安装配置 | 菜鸟教程）

2、操作

【1】选择储存vue地址，你可以更改，如果会，可以跳过

//打开cmd

Microsoft Windows [版本 10.0.22631.3810]
(c) Microsoft Corporation。保留所有权利。
//我准备将vue保存在"C:\Users\19641\Desktop\test2"目录下

//检查电脑安装的vue版本，要求vue版本是15.0或更高版本
C:\Users\19641>node -v
v20.15.0
//打开c盘
C:\Users\19641>c:

//读取c盘，执行代码：dir

C:\Users\19641>dir
 驱动器 C 中的卷是 Windows-SSD
 卷的序列号是 D893-BF9E
以下是运行结果：
 C:\Users\19641 的目录

05/07/2024  09:51 pm    <DIR>          .
05/07/2024  05:51 pm    <DIR>          ..
17/04/2024  07:25 pm    <DIR>          .android
14/10/2023  11:37 pm    <DIR>          .arduinoIDE
30/05/2024  05:22 pm               152 .bash_history
13/06/2024  04:58 pm    <DIR>          .dbclient
29/10/2023  05:12 pm    <DIR>          .dotnet
21/05/2024  04:58 pm    <DIR>          .gnupg
02/04/2024  09:37 pm    <DIR>          .hvigor
15/05/2024  04:56 pm    <DIR>          .kuaiya
16/04/2024  04:32 pm    <DIR>          .LemuHyperv
29/05/2024  07:39 pm                 0 .node_repl_history
02/04/2024  09:36 pm    <DIR>          .ohpm
17/05/2024  03:17 pm    <DIR>          .ollama
31/05/2024  03:56 pm    <DIR>          .sqlstudio
13/05/2024  09:15 pm    <DIR>          .ssh
29/03/2024  04:50 pm    <DIR>          .stm32cubemx
14/10/2023  11:10 pm    <DIR>          .stmcufinder
15/10/2023  01:17 pm    <DIR>          .templateengine
16/10/2023  11:02 am    <DIR>          .vscode
29/05/2024  08:46 pm                31 .vuerc
16/10/2023  08:00 pm    <DIR>          3D Objects
16/10/2023  08:00 pm    <DIR>          AppMods
15/10/2023  01:38 am    <DIR>          Autodesk
18/05/2024  05:09 pm        28,103,036 cg-client
14/10/2023  10:48 pm    <DIR>          Contacts
05/07/2024  09:24 pm    <DIR>          Desktop
17/04/2024  05:56 pm    <DIR>          DevEcoStudioProjects
30/06/2024  09:56 pm    <DIR>          Documents
17/06/2024  03:49 pm    <DIR>          Downloads
14/10/2023  10:48 pm    <DIR>          Favorites
               5 个文件     28,103,219 字节
              41 个目录 41,483,153,408 可用字节

//打开desktop
C:\Users\19641>cd  Desktop
//读取
C:\Users\19641\Desktop>dir
 驱动器 C 中的卷是 Windows-SSD
 卷的序列号是 D893-BF9E

 C:\Users\19641\Desktop 的目录

05/07/2024  09:24 pm    <DIR>          .
05/07/2024  09:51 pm    <DIR>          ..
03/06/2024  11:16 am            23,717 2020版keil注册机.zip
13/12/2023  11:27 am            26,265 232401学期.docx
15/10/2023  01:36 am             1,776 3ds Max 2024 - Simplified Chinese.lnk
15/10/2023  01:16 am             1,105 7zFM - 快捷方式.lnk
01/04/2024  05:28 pm               756 Adobe Photoshop CC 2018.lnk
14/10/2023  11:36 pm               875 Arduino IDE.lnk
11/11/2023  02:36 pm             1,409 Autoupdate - 快捷方式.lnk
29/04/2024  09:44 pm               206 Company of Heroes 2.url
10/04/2024  06:58 pm               673 Embarcadero Dev-C++.lnk
08/06/2024  08:56 am               205 Empire Total War Demo.url
14/04/2024  07:38 pm             3,718 fireTools - 快捷方式.lnk
03/06/2024  02:00 pm               945 Keil uVision5.LNK
22/04/2024  02:39 pm               401 key.txt
15/10/2023  04:29 pm               774 Lenovo One.lnk
08/06/2024  08:56 am               205 Napoleon Total War Demo.url
01/04/2024  04:51 pm               656 OpenMV IDE.lnk
22/10/2023  06:12 pm             2,586 Paradox Launcher v2.lnk
22/05/2024  08:58 am               808 Pointofix.lnk
27/03/2024  08:49 am             2,122 STM32CubeMX.lnk
05/07/2024  09:24 pm    <DIR>          test2
24/06/2024  08:59 am        18,598,251 USART_printf(2) -111 - 副本 - 副本.zip
15/01/2024  10:03 am             1,764 Visual Studio 2022.lnk
09/11/2023  05:54 pm               889 Visual Studio Code.lnk
15/04/2024  02:02 pm               864 vmware.lnk
29/08/2022  10:49 pm             2,360 Word.lnk
06/05/2024  09:01 pm             2,421 WPS Office.lnk
02/04/2024  02:45 pm             7,057 yolov5_detect_C_demo.tar.zip
18/04/2024  08:25 pm         9,276,838 创新工坊发票.zip
16/11/2023  11:28 pm               633 城市天际线2.lnk
01/07/2024  11:19 am    <DIR>          大二
30/06/2024  08:34 pm               803 夸克网盘.lnk
05/12/2023  08:23 pm           560,346 奥迪A7组.zip
14/10/2023  11:33 pm               962 微信.lnk
19/02/2024  01:34 pm            32,768 校校卖货郎.doc
06/05/2024  08:56 pm               537 激活Office.lnk
30/06/2024  08:57 pm               597 百度网盘同步空间.lnk
31/03/2024  09:34 pm             1,501 联想PDF转换器.lnk
03/04/2024  09:10 am               929 联想模拟器.lnk
24/04/2024  01:22 pm             1,346 联想浏览器.lnk
30/06/2024  08:38 pm               981 迅雷.lnk
              38 个文件     28,561,049 字节
               4 个目录 41,438,892,032 可用字节
//打开 test2
C:\Users\19641\Desktop>cd test2

[2]搭建vue


//写入vue搭建代码：npm init vue@latest
C:\Users\19641\Desktop\test2>npm init vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y
//这里询问是否搭建，y（是）

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework
//这里让你取名，我取的是：teacher-number1
√ Project name: ... teacher-number1
//基于你的选择，你决定不添加以下功能：TypeScript、JSX 支持、Vue Router（用于单页面应用开发）、Pinia（用于状态管理）、Vitest（用于单元测试）、端到端测试解决方案、ESLint（用于代码质量检查）以及 Vue DevTools 7 扩展（用于调试）。
√ 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
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes
//


//新手都选no
Scaffolding project in C:\Users\19641\Desktop\test2\teacher-number1...

Done. Now run:

  cd teacher-number1
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g npm@10.8.1
npm notice
// 

 以此执行下面命令
cd teacher-number1//打开teacher-number1
  npm install//下载程序
  npm run dev//运行


C:\Users\19641\Desktop\test2> cd teacher-number1

C:\Users\19641\Desktop\test2\teacher-number1>npm install

added 180 packages, and audited 181 packages in 41s

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

found 0 vulnerabilities

C:\Users\19641\Desktop\test2\teacher-number1>npm run dev

> teacher-number1@0.0.0 dev
> vite


  VITE v5.3.3  ready in 391 ms

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

//最后在浏览器打开自己搭建的；http://localhost:5173/