vue脚手架安装(史上最简单、史上最透彻、史上最全的终极解决方案)
什么是vue脚手架?
Vue脚手架呢,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
安装脚手架 第一步
1. cmd 打开小黑框 在小黑框里面输入vue脚手架全局安装命令 npm install -g @vue/cli
注:npm 为node自带的包管理工具,用来下载项目所需的各种依赖。
2. 创建一个vue文件夹 在小黑框中输入 vue create 项目名
-
当我们执行vue create day命令时,在终端中会提示我们选择项目的预置,我们可以通过上下按键选择,第一、二个选择是default默认设置,里面包含了babel和eslint,第三个选择是手动选择设置特性,我们选择第三个手动选择配置。
-
选择项目的预置
上图中我们选择了手动配置项目所需依赖,接下来终端会提示我们去进行手动选择:
使用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脚手架项目创建成功了