vue3.x

一、体验vue3.0 API

1.初始化项目

vue-cli目前还没有发布支持vue3.0的版本,需要手动配置webpack

创建项目目录

 mkdir vue-next-sample

初始化 package.json 文件，管理项目依赖

npm init --yes

安装 Vue.js 3.0 模块 npmjs
通过 npm i vue 安装的是2.6.11版本
vue当时的一个开发者，根据官方给出的一些资料，自己写出了简版的vue3.0的实现，
并已vue插件(composition-api)的形式放进来了，使用这个插件就可以在vue2.x的项目中使用vue3.x的语法

npm i vue@next

安装webpack 相关模块

# webpack 原因是因为这里要用到单文件组件，单文件组件需要解析，解析用webpack最常见的一种方式
# webpack-cli 用命令行的方式去启动项目
# webpack-dev-server 帮我们启动一个http服务器
npm i webpack webpack-cli webpack-dev-server --save-dev

安装一些需要用到的webpack 插件

# html-webpack-plugin 
# 为html文件中引入的外部资源
# 可以生成创建html入口文件
# mini-css-extract-plugin 
# 将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件
npm i html-webpack-plugin mini-css-extract-plugin --save-dev

安装Vue.js单文件组件的加载器

# vue-loader 加载器单文件组件的解析工具
# vue/compiler-sfc 编译单文件组件(.vue)的编译器
npm i vue-loader@next @vue/compiler-sfc --save-dev