文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一步步讲解Vue如何启动项目

2023-02-01 15:00

关注

前言

废话就不多说了,直接进入正题

一、首先了解vue-cli脚手架

vue-cli 是一个基于 Vue.js 进行快速开发的完整系统

vue-cli是 基于 webpack 构建 vue 前端模块工程环境webpack 将 原理网页的 依赖变成 webpack的依赖, 只需要将网页的依赖在main.js 入口文件中引入即可在浏览器上运行

网址:介绍 | Vue CLI

二、安装脚手架

npm install -g @vue/cli

  注意:查看node版本,要在v14以上

三、启动项目

命名为:

vue create 项目名

注意:创建的目录下的别的文件名不能包含vue,并且不能够使用驼峰命名法,两个单词之间使用“-”分割 

运行命令成功,会出现一下界面:

让你进行选择是默认安装还是通过自己设置的安装。

 这里选手动安装,第三个选项

 接着会让选择相应的配置,勾选以下几个选项,利用空格勾选,所有选择完毕后按回车确认

 这里选择2.x,根据需求选择

使用历史模式路由器?选择是

 选择css预编译器,这里我选择的是sass

 选择一个linter / formatter配置:这里选择的是标准配置

  询问是否记住你所选择的配置,进行保存,这里选择保存

 你喜欢把Babel, ESLint等的配置放在哪里?这里选择在专用配置文件中,新建了一个配置文件

询问是否记住你所选择的配置,在未来的项目创建中使用,进行保存,这里选择保存

 起一个名字记录,下次方便找到

 出现以下内容说明已经启动成功。

进入项目文件夹,在cmd命令行运行命令,注意:一定得去项目文件夹

npm run serve

出现这个内容表示项目启动完成。

附:解决vue 启动项目时间很长

突然想起来,之前开发vue项目的时候,第一次以及后续每次更改完东西后,页面都需要加载,启动时间很长,需要两三分钟!!

解决方案: 把config/index.js中的 useEslint 属性值改为 false 即可!!!

亲测过,真的好用哦!

总结

vue的项目启动过程中,还是存在一些小细节还是需要注意,小伙伴们还是得仔细的安装哦

到此这篇关于Vue如何启动项目的文章就介绍到这了,更多相关Vue启动项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯