使用 vue-cli 脚手架构建 vue 项目

 

在构建项目之前,需要电脑已安装node。

构建项目之前需要安装vue-cli,全局安装:

npm install vue-cli -g

创建一个基于webpack模板的新项目:

vue init webpack 项目名称

回车之后需要输入配置:

C:\Users\SmallBag\Desktop\study\vue_test>vue init webpack vue_test

? Project name vue_test
? Project description study project
? Author future
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue_test".

完成后接着:

cd 项目名称
npm install
npm run dev

回车后即可运行项目。

复制地址 http://localhost:34923 在浏览器上面打开,可看到:

此时项目已经创建完成并且已经运行。

创建后的项目结构:

 

 

新版本vue-cli已改名为 @vue/cli,安装时需要

npm install @vue/cli -g

如果继续使用vue-cli进行安装,将会安装2.x最新版本,不会安装3.x以上版本,目前最新版本4.3.x

3.x新版本创建项目使用:

vue create 项目名称

如果希望继续使用:

 vue init webpack 项目名称

可以安装:

npm install @vue/cli-init

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli脚手架Vue官方提供的一个工具,用于快速生成一个Vue项目的模板。它预先定义了项目的目录结构和基础代码,可以帮助开发者更快速地搭建一个Vue项目的框架。通过Vue-cli,开发者可以使用简单的命令完成项目环境的搭建,包括插件、开发服务、构建打包等功能。安装Vue-cli可以通过命令npm install -g vue-cli来进行。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [Vue-cli脚手架](https://blog.csdn.net/qq_42265394/article/details/119778843)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue-clivue脚手架)超详细教程](https://blog.csdn.net/u012660464/article/details/114834812)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue实战之Vue CLI 脚手架](https://blog.csdn.net/weixin_45442617/article/details/113951338)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值