vue3.0项目使用vue-cli搭建

vue3.0项目使用vue-cli搭建

说说最近学习的感想

最近学习一些东西和解决一些问题总是急急忙忙的没有吧问题看透,看到好多帖子分享的内容在自己的问题上试一试就解决了,后来反思了一下不能这样。
1.知识其实没有提升
2.遇到问题不知道从哪里入手
3.开发中给自留坑

想了一下以后遇到问题一定要尽量找到依据和问题的根源这样以后在遇到才好从根本上解决问题。重要的一点就是找到API文档才好深入理解。(小伙伴们是不是好多和我一样的感触!!!!)

开始搭建

vue-cli API地址:https://cli.vuejs.org/zh/guide/installation.html

在这里插入图片描述

安装

首先参看自己是否安装 vue-cli 出现一下说明你安装了
vue --version

在这里插入图片描述

安装命令 安装完后看看是否安装成功,还是上面的步骤。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建项目 hello-world是项目名称 会自动创建项目文件夹
vue create hello-world

我们使用自己选择配置 上下选择回车
在这里插入图片描述
选择你要的组件 空格选择取消 一般我们是需要router和vuex的我们选择上
在这里插入图片描述在这里插入图片描述
选择版本vue版本
在这里插入图片描述
选择vue-router的模式
vue-router(前端路由)有两种模式,hash模式和history模式,这里来谈谈两者的区别。

hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有底带#,外观上比hash 模式好看些
原理的区别(原理)
hash 能兼容到IE8, history 只能兼容到 IE10;
由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。

在这里插入图片描述
选择ESLint语法检测配置
在这里插入图片描述
回车后,表示什么时候使用ESLint,这里选择保存时即可,也就是默认。如下图所示。
在这里插入图片描述
回车后,接下来的选项是配置在配置文件中,还是在package.json文件中。这里选择在配置文件中
在这里插入图片描述
配置别名 回车后会开始创建项目
在这里插入图片描述
项目创建成功
在这里插入图片描述
创建完项目报错其实是语法检测错误
在这里插入图片描述

在这里插入图片描述

其实弄完后看看api只是api文档没有这么细致。根据api大家应该也都能独立完成只是效率的问题。还是希望大家和我一样根据api去完成试试。

后面我在(根据api)写一篇多环境配置的帖子希望大家多看api开发这样自己能理解的更通透,并且自己实际操作一下不然根本没印象,写的不对的地方希望大家指正,加油小伙伴们。觉得有用给我个赞哦!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
搭建Vue3.0项目的环境,您可以按照以下步骤进行操作: 1. 首先,确保您已经安装了Node.js。您可以在命令行中输入 "node -v" 来检查是否已安装Node.js。如果*** 升级Vue CLI到4.0版本。如果您之前已经安装了旧版本的Vue CLI,需要先卸载旧版本。您可以在全局命令行中运行 "cnpm uni -g vue-cli" 来删除旧版本。然后,您可以在全局命令行中运行 "cnpm i -g @vue/cli" 来安装Vue CLI的4.0版本。最后,您可以通过运行 "vue -V" 检查Vue CLI的版本号,确保已经成功安装了4.0版本。 3. 创建一个新的Vue项目。您可以使用命令行进入到您想要创建项目的目录中,然后运行 "vue create 项目名" 来创建一个新的Vue项目。根据提示选择您所需的特性和插件,然后等待项目创建完成。 4. 进入项目文件夹。在命令行中切换到您刚刚创建的项目文件夹中,使用 "cd 项目名" 命令。 5. 启动项目。在项目文件夹中运行 "npm run serve" 命令来启动项目。这将启动一个开发服务器,并在浏览器中打开项目。 通过按照以上步骤,您就可以成功搭建Vue3.0项目的环境,并开始进行开发了。如果您需要更详细的配置或使用Vue3.0进行接口封装,以及使用ant-design-vue进行后台管理系统的开发,可以参考相应的文档或教程进行进一步学习。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [手把手教你vue3.0项目搭建](https://blog.csdn.net/weixin_42762167/article/details/112216178)[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_2"}}] [.reference_item style="max-width: 50%"] - *2* [配置一个vue3.0项目的完整步骤](https://download.csdn.net/download/weixin_38629130/13200273)[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_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值