原来大家是这样创建Vue项目的

  1. 选择一个文件夹,在此路径下打开cmd,输入命令
    vue create demo-test
    

    注意:路径中不要包含中文、空格及特殊字符。项目名称必须小写,否侧不能正常创建项目。

  2. 手动选择Vue版本,这里我习惯选择手动选择功能,这样的好处是可以根据自己的习惯更灵活的创建项目。(方向键上下来回选择,空格选中所选插件,回车键进入下一个选项)

    27faef1dc22b45d38cda551b366a7dfa.png

  3. 选择要用到的插件(多选),这里简单地介绍一下各选项的作用。

    0c8ed15c07bd48a98339c80827d9afd4.png

  • Babel:进行语法降级,确保在旧版浏览器中正常运行;
  • TypeScript: JavaScript语言的超集(选择此项的话,项目默认语言会从JS改为TS);
  • Progressive Web App (PWA) Support :使网络应用程序更像本机应用程序,具有离线访问、推送通知和可以安装在用户设备上的功能;
  • Router:管理导航和路由;
  • Vuex:状态管理工具,管理项目中的公共数据;
  • CSS Pre-processors: CSS预处理器,允许以更结构化和高效的方式编写CSS,具有变量、嵌套和混合等功能,使样式更易于维护;
  • Linter / Formatter : Linter是一个分析代码潜在错误、bug或样式问题的工具。格式化器有助于强制执行编码样式指南,并自动格式化代码以保持一致性;
  • Unit Testing : 单元测试涉及在隔离的环境中测试代码的各个单元或组件,以确保它们按预期工作。它有助于早期发现错误并保持代码质量;
  • E2E Testing : 端到端测试涉及从开始到结束测试整个应用程序流程,以确保所有组件正确协同工作。它有助于验证应用程序的功能和行为。

     4 .  选择Vue版本
     5.选择路由模式,有history和hash两种模式,history需要服务器进行额外配置,这里我输入n,意思是不选择history模式。c9f74b54177144d3a5a48e4d3bba0506.png

     6.选择CSS预处理器79bedd68057c487c91f93d0b32f60d74.png

   7.选择ESLint模式

415062e3f8b84af98f4d27e3ef0912ca.png 

 8.选择Lint功能

ab7cf07a1c054268a78094871a51c6d0.png

9.选择配置文件,一般选择package.json就行

67ccaaec56504694a1d3401eb5b7f576.png

10.不要固定此次设置,输入N

b0faf86629744fb9827612072d4ddc0c.png

        这样,我们的项目就创建好了,现在输入以下代码,项目就可以跑起来了。你也来创建一个项目试试吧!!

cd project-name
npm run serve(Vue2)或者npm run dev(Vue3)

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端-白小纯

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

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

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

打赏作者

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

抵扣说明:

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

余额充值