vue-cli 工程化安装（基于3.0）

对于vue3.0 要使用npm 上可用的vue cli v4.5 作为 @vue/cli（也就是vue/cli 版本必须在4.5以上才能满足vue3.0）

// 1. 全局安装 @vue/cli
// yarn 安装：yarn global add @vue/cli
// npm 安装: npm install -g @vue/cli

// 2. 之前已安装过vue-cli 可升级新版
// 2-1. npm update -g @vue/cli    (升级到最新)
// 2-2. vue-V    (查看当前版本)

// 3. 之前vue2.0 是用webpack构建项目，vue3.0退出 vite （是一个web开发构建工具，通过其原生ES 模块导入方式，可以实现闪电般冷服务器启动）

// 4. 快速创建项目：
// npm：
// 4-1. npm init @vitejs/app 项目名称（注意不能驼峰命名，可使用-中划线）
// 4-2. cd 项目名称     (切换到项目路径)
// 4-3. npm install     (安装依赖)
// 4-4. npm run  dev     (启动项目)

// yarn：
// 4-1. yarn create @vitejs/app 项目名称（注意如上）
// 4-2. cd 项目名称
// 4-3. yarn
// 4-4. yarn dev
// yarn build   (打包)


// 没有用过yarn的可以自行了解去安装下yarn
// vite 安装：
// npm init vite@latest
// yarn create vire

// 生成的项目文件结构拆解（基于yarn创建）

// public  全局的公共的静态的文件，不需要编译的（例如网页的图标）
// *gitignore   项目的git管理配置
// index.html   所有模块页面的汇总整合（此处是单页面应用原理）
// package.json   项目的描述（所有依赖的名称和版本，也可以说是依赖管理文件）
// vite.config.js   作用和webpackage 一样，打包构建（配置代理，https 等底层构建配置的改写）
// yarn.lock   版本锁定
// src   所有的业务代码目录结构创建在此（需要编译的文件）

// vue 是单页面应用程序最终浏览器加载的是index.html 因为vue 是组件化开发，所以在vue中最大的组件（项目级组件）是 src/app.vue 后期会通过路由的形式将一些页面级的组件汇总到 app.vue
// 然后app.vue 会输出给 src/main.js 然后main.js 会把整体的组件模块放到 index.html 中
// src/assets 文件（放置图片，音频视频等静态文件）
// components（公共的局部组件放置）
// pages（功能页面）

标签：npm,vue,cli,app,yarn,组件,工程化
来源： https://www.cnblogs.com/qianduan-lucky/p/16244924.html