脚手架构建vue项目

最新推荐文章于 2024-09-03 16:24:47 发布

不管，我要跨世纪

最新推荐文章于 2024-09-03 16:24:47 发布

阅读量446

点赞数

文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/gengtieguang/article/details/108600031

版权

本文介绍了如何使用命令行工具@vue/cli来构建Vue项目。首先，通过CMD检查@vue/cli是否已安装，如果没有，使用npm全局安装。然后，进入目标文件夹并使用vue create命令创建新的Vue项目，例如创建名为'health-up'的项目。此外，还提到了常用的下载步骤，即安装axios库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构建vue项目

cmd打开小黑窗
不知道是否安装，可以先【-大v】查看@vue/cli
@vue/cli -V
全局下载@vue/cli
npm install -g @vue/cli
进入你想构建项目的文件夹【可以输入dir查看文件目录】
cd 项目/
vue create 项目名，创建项目
vue create health-up

Microsoft Windows [版本 10.0.17134.1]
(c) 2018 Microsoft Corporation。保留所有权利。

C:\Users\Lenovo\Desktop\项目实战\我的>@vue/cli -V
2.9.6

C:\Users\Lenovo\Desktop\项目实战\我的>cd 项目/

C:\Users\Lenovo\Desktop\项目实战\我的\项目>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 9AFF-404F

 C:\Users\Lenovo\Desktop\项目实战\我的\项目 的目录

2020/06/09  12:32    <DIR>          .
2020/06/09  12:32    <DIR>          ..
2020/06/08  22:59    <DIR>          health-m
2020/06/04  14:01    <DIR>          images
2020/06/04  14:01                30 package-lock.json
2020/06/09  12:27    <DIR>          public
2020/06/09  12:26    <DIR>          server
2020/06/09  14:14    <DIR>          userImg
               1 个文件             30 字节
               7 个目录 19,045,322,752 可用字节


C:\Users\Lenovo\Desktop\项目实战\我的\项目>vue create health-up


Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as:


Vue CLI v4.4.1
✨  Creating project in C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up.
⚙️  Installing CLI plugins. This might take a while...


> core-js@3.6.5 postinstall C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up\node_modules\ejs
> node ./postinstall.js

added 1182 packages from 827 contributors in 32.966s

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

�  Invoking generators...
�  Installing additional dependencies...


> node-sass@4.14.1 install C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node
Download complete  ] - :
Binary saved to C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up\node_modules\node-sass\vendor\win32-x64-72\binding.node
Caching binary to C:\Users\Lenovo\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-72_binding.node

> node-sass@4.14.1 postinstall C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up\node_modules\node-sass\vendor\win32-x64-72\binding.node
Testing binary
Binary is fine
added 90 packages from 65 contributors in 186.676s

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

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project health-up.
�  Get started with the following commands:

 $ cd health-up
 $ npm run serve


C:\Users\Lenovo\Desktop\项目实战\我的\项目>cd health-up

C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 9AFF-404F

 C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up 的目录

2020/06/09  15:52    <DIR>          .
2020/06/09  15:52    <DIR>          ..
2020/06/09  15:49               230 .gitignore
2020/06/09  15:49                73 babel.config.js
2020/06/09  15:52    <DIR>          node_modules
2020/06/09  15:52           454,353 package-lock.json
2020/06/09  15:49               633 package.json
2020/06/09  15:49    <DIR>          public
2020/06/09  15:52               273 README.md
2020/06/09  15:49    <DIR>          src
               5 个文件        455,562 字节
               5 个目录 18,640,203,776 可用字节

C:\Users\Lenovo\Desktop\项目实战\我的\项目\health-up>

常用下载

npm i axios -S