Vue3.0的安装与使用

一、重新认识vue-cli

安装最新版本脚手架
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 雪碧图