什么是Vue及搭建的全部过程

一、认识vue-cli

1、安装最新版本脚手架
vue-cli官网:https://cli.vuejs.org/zh/

目前版本：v4.5.x

安装：npm install -g @vue/cli

2.使用vue脚手架创建项目

第一种命令行
vue create 项目名（字母开头，不要大写） 回车

default (自动安装)
manually （建议：手动安装）

第二种：以图形界面方式创建
vue ui

3.vue-cli4.5目录结构

public
index.html —入口html页面
静态资源–json文件
src
assets:资源文件（字体，图标，图片）’
components:存放公共组件
router:路由文件
store:存放vuex状态管理
views:存放页面
filters:存放过滤器文件
directives:存放自定义指令文件夹
mixins:存放混入方法
utils:存放一些封装的公共方法(js文件)
http:存放封装的http接口请求
App.vue 根组件
main.js 项目执行的入口js

.gitignore:git提交时忽略文件
.babel.config.js babel配置文件
.eslintrc.js EsLint配置文件（代码质量检查配置）
package.json node配置依赖文件
README.MD 项目的说明文档
vue.config.js 配置webpack环境

禁用Eslint代码检查：

4.项目开发前的环境准备

初始样式

reset.css

适配环境：rem,vw,vh,flex

xxxrem=xxxpx/html根字号

例如：

0.44rem=44px/100

px转vw,rem的插件：

@moohng/postcss-px2vw

npm地址：https://www.npmjs.com/package/@moohng/postcss-px2vw

安装：

npm install @moohng/postcss-px2vw --save-dev

svg图标：放大不失真，可以通过css来调整样式
1.直接复制svg代码，缺点：代码量比较大
2.直接当作img图片来处理
3.svg sprites: svg 雪碧图

以上是前端三大框架的主流框架Vue的脚手架快速安装的完整的过程，希望我的前端微薄知识能给你们带来帮助。

欢迎大家加群交流 群号：954314851