利用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 <template-name> <project-name>
    两种常用的模板类型: webpack-simple webpack
    如:vue init webpack my-project
  • 安装依赖包
    npm install
  • 启动
    npm run devnpm 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 <peoject-name> 通过命令行创建 参考
  • 启动
    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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容