vue脚手架安装最简单的终极方案

vue脚手架安装(史上最简单、史上最透彻、史上最全的终极解决方案)

什么是vue脚手架?

Vue脚手架呢,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板

安装脚手架 第一步

1. cmd 打开小黑框 在小黑框里面输入vue脚手架全局安装命令 npm install -g @vue/cli
注:npm 为node自带的包管理工具,用来下载项目所需的各种依赖。

2. 创建一个vue文件夹 在小黑框中输入 vue create 项目名
在这里插入图片描述

  1. 当我们执行vue create day命令时,在终端中会提示我们选择项目的预置,我们可以通过上下按键选择,第一、二个选择是default默认设置,里面包含了babel和eslint,第三个选择是手动选择设置特性,我们选择第三个手动选择配置。
    在这里插入图片描述

  2. 选择项目的预置
    上图中我们选择了手动配置项目所需依赖,接下来终端会提示我们去进行手动选择:
    使用space空格键进行选择/取消,a键进行全选/全不选,i键进行反选

    在这里插入图片描述
    Vue-cli为我们提供的可选择的项目配置有:
    Babel 支持babel对高级ES代码进行转化
    TypeScript 支持使用 TypeScript 书写源码
    Progressive Web App (PWA) Support PWA 支持渐进式WEB应用
    Router 支持 vue-router 路由
    Vuex 支持 vuex 状态管理
    CSS Pre-processors 支持 CSS 预处理器
    Linter / Formatter 支持代码风格检查和格式化
    Unit Testing 支持单元测试
    E2E Testing 支持 E2E 测试
    具体选择哪些项目预置需要根据项目的实际情况进行选择

5.在回车进行下一步时,终端会提示是否把路由的模式改变为History模式,跟据自己的需求输入y或者n,在这里我不改变 ,还使用hash模式:
在这里插入图片描述

6.这一步是问我们,是把Babel、ESLint等信息全放在package.json文件呢,还是单独文件管理?我选择放进package.json文件中:
在这里插入图片描述
7.接着终端会提示我们要不要把本次预置保存下来以便以后的项目使用,在这里我选的n不保存:
在这里插入图片描述
8.选n按回车后,我们就可以等待下载啦:
在这里插入图片描述
9.下载完成后的界面是这个样子的:
在这里插入图片描述
10,启动项目:
在这里插入图片描述
11,如果出现了端口号,就说明我们这个vue脚手架项目创建成功了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值