利用vue-cli、vite2快速生成vue项目

vue-cli、vite2都可以进行快速搭建基于Vue.js 开发的项目。

1、vue-cli（1.x 或 2.x-旧版本）

安装环境：Node.js (>=6.x, 8.x preferred), npm version 3+ and Git

• 安装
  npm install vue-cli -g
• 查看版本号
  vue -V
• 卸载
  npm uninstall vue-cli -g
• 创建vue项目
  vue init
  两种常用的模板类型： webpack-simple webpack
  如：vue init webpack my-project
• 安装依赖包
  npm install
• 启动
  npm run dev 或 npm start
• 打包
  npm run build

2、@vue/cli（3.x或4.x-新版本-推荐）

安装环境：Node.js 8.9 或更高版本 (推荐 8.11.0+)

• 安装
  npm install @vue/cli -g
• 查看版本号
  vue -V
• 卸载
  npm uninstall @vue/cli -g
• 使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发
  npm install @vue/cli-service-global -g
• 创建vue项目
  • vue ui 通过图形化页面创建
  • vue create 通过命令行创建 参考
• 启动
  npm run serve
• 打包
  npm run build

2.1 创建vue2项目

image.png

2.1 创建vue3项目

image.png

3、vite2

vue-cli是基于webpack来构建的，vite2基于 原生 ES 模块 提供了 丰富的内建功能。创建vue3项目步骤如下所示：

image.png

添加eslint npm install -D eslint，初始化eslint如下图所示：

image.png

使用vuex、vue-router npm install -S vuex@next vue-router@next