安装vue脚手架的步骤（部分）

最新推荐文章于 2024-07-29 16:54:35 发布

OLoyy

最新推荐文章于 2024-07-29 16:54:35 发布

阅读量1.4k

点赞数

分类专栏： vue前端文章标签： vue vue-cli3

本文链接：https://blog.csdn.net/kklv__lo/article/details/121664627

版权

vue前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档详细记录了如何安装Node.js，配置淘宝镜像，使用Vue CLI创建一个新的Vue项目，并启动本地开发服务器的过程。通过`vue create`命令创建项目，然后运行`npm run serve`启动服务，最后在浏览器中预览项目。Vue CLI的使用显著提高了前端开发效率。

摘要由CSDN通过智能技术生成

安装脚手架前需要安装node-v16.13.0-x64.msi，
打开命令工具（win+r调出运行，打开cmd），node -v可以查看版本号
利用淘宝镜像，用它的原因很简单，npm命令在国内下载速度很慢，用淘宝镜像加快下载速度（淘宝镜像会和npm官方的服务器保持同步）
使用命令行安装这个新的包
npm install -g @vue/cli
可以利用vue -V来检查版本是否正确
//切换工作区
C:\Users\24815>D:
//新建一个vue项目名为hello-vue
//以下时弹出的一些布置信息
D:\lucky\htmlvue>vue create hello-vue

Vue CLI v4.5.15
//选择[Vue 2] babel, eslint 也可根据自己需要更改，一下是[Vue 2] babel, eslint的设置效果
? Please pick a preset: Default ([Vue 2] babel, eslint)

Vue CLI v4.5.15
✨ Creating project in D:\lucky\htmlvue\hello-vue.
⚙️ Installing CLI plugins. This might take a while…

added 1272 packages in 1m

16 packages are looking for funding
run npm fund for details
🚀 Invoking generators…
📦 Installing additional dependencies…

added 55 packages in 7s

16 packages are looking for funding
run npm fund for details
⚓ Running completion hooks…

📄 Generating README.md…

🎉 Successfully created project hello-vue.
👉 Get started with the following commands:
//-------------------------------
//在下面抄写两句话
$ cd hello-vue
$ npm run serve
//-------------------------------

D:\lucky\htmlvue>cd hello-vue

D:\lucky\htmlvue\hello-vue>npm run serve

hello-vue@0.1.0 serve
vue-cli-service serve

INFO Starting development server…
98% after emitting CopyPlugin

DONE Compiled successfully in 8407ms 下午3:10:16

App running at:
//在浏览器中打开localhost:8080

Local: http://localhost:8080/
Network: http://172.24.186.73:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.
//按两次ctrl+c退出
终止批处理操作吗(Y/N)?
^C
//vue ui 打开视图界面
//会弹出一个网址为localhost:8000界面，就可以开始使用了，找一个合适的集成软件，打开新建的项目，就可以开始代码编写了
D:\lucky\htmlvue\hello-vue>vue ui
🚀 Starting GUI…
🌠 Ready on http://localhost:8000

ps这是从命令行复制得来的数据，以’//'开始的是自己的一些注释，以便帮助学习，如有不理解欢迎评论。
共同学习！
共同进步！
加油！