创建Vue脚手架过程

创建Vue脚手架过程

  1. win+R并输入cmd,在命令框中输入vue,查看是否安装Vue-cli

    image-20230128215116221

    • 若出现上述情况,则是安装过;若不是,则需要npm install -g @vue/cli来安装
  2. 切换到想要从创建项目的目录,cmd输入:vue init webpack projectName

    • 例如此处输入:vue init webpack bike

      image-20230128224909178

    • 连续回车几次后出现选择,选择第一个回车

      image-20230128224958894

    • 接着询问是否需要路由,输入y回车

      image-20230128225105052

    • 连续输入3个n,最后选择npm方式,回车

      image-20230128225217176

    • 安装完成image-20230128225609972

  3. 启动项目:按照上面命令的提示,进入bike目录,再输入npm run dev启动项目

    • 启动成功image-20230128225945881

(img-UmNFPsI8-1674918597358)]

创建Vue脚手架项目是通过使用vue-cli这个工具进行的。vue-cli是一个对Vue项目构造做了封装的脚手架工具,它可以帮助我们快速创建Vue项目,并且自动完成一些常用的配置,省去了手动配置webpack的过程。 下面是创建Vue脚手架项目的一些步骤: 1. 首先,你需要安装Node.js和npm,因为vue-cli是基于Node.js的命令行工具。 2. 安装vue-cli:通过运行命令`npm install -g @vue/cli`来全局安装vue-cli。 3. 创建项目:使用命令`vue create project-name`来创建一个新的Vue项目,其中project-name是你自己定义的项目名称。 4. 根据提示进行配置:在创建项目的过程中,你可以选择手动配置或者使用默认配置来初始化项目。你可以根据自己的需要进行选择。 5. 安装依赖:创建完成后,进入项目目录并运行`npm install`命令来安装项目所需的依赖。 6. 启动项目:安装完成后,可以通过运行`npm run serve`命令来启动开发服务器,然后在浏览器中访问http://localhost:8080来预览你的项目。 在创建完成后,你可以在生成的项目中找到一些由脚手架自动生成的文件,如App.vue和main.js。这些文件是构建Vue项目的基础,你可以在其中编写组件和配置项目的入口文件。 总结来说,通过使用vue-cli工具,你可以快速创建并初始化Vue项目,省去了手动配置的繁琐过程,让你能够更专注于开发自己的应用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE——使用VUE脚手架创建项目](https://blog.csdn.net/weixin_68567820/article/details/125379407)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [基于脚手架创建Vue项目实现步骤详解](https://download.csdn.net/download/weixin_38550605/12924495)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Thomas_cannon

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值