iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue-cli3脚手架安装方法
  • 788
分享到

vue-cli3脚手架安装方法

vue-cli3脚手架安装vue cli3脚手架 2023-05-14 06:05:22 788人浏览 泡泡鱼
摘要

1.Vue脚手架的使用需要node.js支持,所以需要下载安装node.js ,可以到node.js官网下载node.js https://nodejs.org/zh-cn

1.Vue脚手架的使用需要node.js支持,所以需要下载安装node.js ,可以到node.js官网下载node.js https://nodejs.org/zh-cn/,可以根据个人需要下载版本,推荐多数用户使用(LTS)

2.安装很简单,一串点点点下一步就完事了,安装路径根据自己爱喜好来设置

3.安装完成后 win+R 输入cmd 查看安装版本

4.npm 安装第三方包时速度过慢问题 npm config set reGIStry=Http://registry.npm.taobao.org/

网上也看也有推荐使用安装 cnmp npm install cnpm-g--registry=https://registry.npm.taobao.org 根据个人喜好选择吧,第二种安装成功率高,第二种就是把npm 替换成 cnpm使用

5 全局安装 vue-cli ,在命令提示窗口执行:npm install -g @vue/cli 或者第二种 cnpm install -g @vue/cli

到这里就恭喜你安装成功了

6 vue -V 查看版本

7 现在开始通过脚手架创建项目,我把项目创建在E盘的test文件夹下,这里可以根据个人喜好存放位置,首先通过dos命令定位到该文件夹下

8 然后创建项目,vue create myvue 回车创建项目 myvue是项目名称,可以自定义项目名字,然后开始进入一系列问答环节 ,default是默认配置,下面是手动选择配置我选择第二种,向下的箭头选中(上下箭头切换)回车

9 babel:转换es6语法的这个必须要,typescript暂时没涉及到,router管理路由的也选上,vuex状态管理就看自己需不需要用,CSS pre样式预处理器这个也加上,linter/FORMatter统一代码风格,最后2个分别是单元测试和端对端测试,一般不会用到

10接着问答题来了:你的路由使用历史模式吗? 路由模式分为Hash模式 History(历史)模式 Abstract模式 三种 hash模式最明显的特点就是url上会带有#号, History历史模式的url就跟正常的访问地址一样,此处我选择yes,

10.1下一步选择css预处理器 我选的 sass/scsss

  10.2选择哪个自动化代码格式化检测 (语法检测工具)就是可以检测出你代码中潜在的问题,保证写出的代码语法正确,风格统一。

ESLint with error prevention only(只检测错误) ESLint + airbnb config 独角兽公司的Airbnb,有人评价说“这是一份最合理的javascript的编码规范”它几乎涵盖了js的各个方面

ESLint + Standard config standardjs是一份强大的js编码规范,自带linter和自动代码纠正,没有配置,自动格式化代码,可在编码早起发现规范问题和低级错误

ESLint + Prettier Prettier 作为代码格式化工具,能够统一整个团队的代码风格 我选的ESLint + Standard config

10.3选择语法检查方式 Lint on save (保存就检测) Lint and fex on commit ( 用户提交文件到git的时候检测 )我选的Lint on save

10.4就是问你babel,postcss,eslint这些配置文件放哪?// in dedicated config files(在专用配置文件中,就是单独管理) in package.JSON(放在package.json里)我选的in dedicated config files

10.5是否将以上这些保存为未来项目的预配置? //如果你选择y那么下次搭建项目是就会出现你这一次配置的选项。 我选择n

11安装成功

项目目录结构

到此这篇关于vue-cli3脚手架安装的文章就介绍到这了,更多相关vue-cli3脚手架安装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue-cli3脚手架安装方法

本文链接: https://www.lsjlt.com/news/202833.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue-cli3脚手架安装方法
    1.vue脚手架的使用需要node.js支持,所以需要下载安装node.js ,可以到node.js官网下载node.js https://nodejs.org/zh-cn...
    99+
    2023-05-14
    vue-cli3脚手架安装 vue cli3脚手架
  • vue-cli3脚手架如何安装
    这篇文章主要讲解了“vue-cli3脚手架如何安装”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue-cli3脚手架如何安装”吧!vue脚手架的使用需要node.js支持,所以需要下载安装...
    99+
    2023-07-05
  • vue-cli3脚手架如何配置使用
    这篇文章将为大家详细讲解有关vue-cli3脚手架如何配置使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系...
    99+
    2024-04-02
  • vue脚手架vue-cli的卸载与安装方式
    目录前言以下列举npm和yarn指令的方式:补充:快速卸载Vue脚手架(vue-cli)总结 前言 若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-c...
    99+
    2024-04-02
  • Vue组件与Vuecli脚手架安装方法超详细讲解
    目录计算属性监听属性组件介绍和定义父子通信父传子子传父ref属性动态组件插槽vue-cli计算属性 计算属性关键字:computed 每次页面刷新都会重新加载数据,而我们有时候退出页...
    99+
    2022-11-13
    Vue组件 Vue cli脚手架
  • Vue脚手架无法安装问题怎么解决
    本篇内容介绍了“Vue脚手架无法安装问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!问题描述以管理员身份进入命令控制符想要安装Vu...
    99+
    2023-07-02
  • vue脚手架vue-cli怎么卸载与安装
    本文小编为大家详细介绍“vue脚手架vue-cli怎么卸载与安装”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue脚手架vue-cli怎么卸载与安装”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言若电脑之前...
    99+
    2023-07-02
  • vue脚手架安装以及安装失败问题解决办法
    目录前言一、脚手架的命令安装1.1 命令查看版本信息1.2 通过键入命令安装脚手架二、node.js环境安装附:vue安装vue脚手架(vue-cli)错误总结总结前言 在不少小伙伴...
    99+
    2024-04-02
  • vue-cli脚手架搭建方式(vue脚手架方式搭建)
    目录1.首先安装node前端环境,可以帮助我们去下载其他的组件2.在hbuilderX中创建一个vue-cli项目(标准的前段项目)3.组件路由 (1)安装 (2...
    99+
    2023-05-16
    vue-cli脚手架搭建 vue脚手架
  • node.js与vue cli脚手架的下载安装配置方法记录
    目录一、node.js安装以及环境配置1、下载vue.js2、安装node.js3、检查node程序是否安装成功4、更改默认路径5、添加环境变量5、测试安装是否成功二、安装vue-c...
    99+
    2024-04-02
  • vue脚手架安装及安装失败问题怎么解决
    这篇文章主要介绍“vue脚手架安装及安装失败问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue脚手架安装及安装失败问题怎么解决”文章能帮助大家解决问题。一、脚手架的命令安装此处默认宝们...
    99+
    2023-07-02
  • vue-cli脚手架
    案例一: ​ 案例二: 案例三: 一、脚手架简介 Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程 1. w...
    99+
    2023-09-27
    java 前端 javascript vue
  • vue脚手架vue-cli怎么用
    这篇文章给大家分享的是有关vue脚手架vue-cli怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue-cli的模板vue-cli的脚手架项目模板有webpack-sim...
    99+
    2024-04-02
  • vue-cli(vue脚手架)详细教程
    Vue CLI(Vue Command Line Interface)是一个基于Vue.js进行快速开发的脚手架工具。它能够帮助开发...
    99+
    2023-09-15
    vue
  • vue脚手架public放什么
    本教程操作环境:windows7系统、vue3版,DELL G3电脑。一、安装Vue脚手架1、第一步(仅第一次执行):全局安装@vue/clinpm i @vue/cli -g2、切换到要创建项目的目录,然后创建项目vue create X...
    99+
    2023-05-14
    Vue
  • Next.js脚手架完整搭建封装的方法步骤
    针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用; 内...
    99+
    2024-04-02
  • vue脚手架配置es6转es5
    随着前端技术的快速发展,ES6已经成为了前端开发的主流语言之一。然而,在实际开发中,我们仍然需要考虑兼容性问题,因为不同的浏览器对ES6的支持程度存在差异。为了解决这个问题,我们需要将ES6代码转换为ES5代码。本文将会介绍如何在Vue项目...
    99+
    2023-05-24
  • Vue脚手架怎么初始化
    这篇文章主要介绍“Vue脚手架怎么初始化”,在日常操作中,相信很多人在Vue脚手架怎么初始化问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue脚手架怎么初始化”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-07-04
  • Vue脚手架学习之项目创建方式
    一、什么是脚手架? 1.Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架。 通过...
    99+
    2024-04-02
  • 关于Vue脚手架中render 理解
    在vue的脚手架中, 我们会看到在入口文件 main.js中的 new Vue的代码中有一段代码 render:h=>h(App); 这段代码不像我们 一般的使用vue 时的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作