欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用vuecli 初始化Vue项目

程序员文章站 2022-04-24 09:26:58
...

1、vue-cli脚手架

  • 作用:生成标准的vue项目的目录
  • 全局命令行工具
  • npm install/uninstall -g @vue/cli 或 yarn global add/remove @vue/cli
    注:vue-cli是1.x或2.x版本 @vue/cli是3.x版本
  • 在3.x版本环境下执行2.x版本的指令,需要安装桥接工具
注意:
全局安装脚手架
npm install -g @vue/cli 可以简写npm i -g @vue/cli
cnpm install -g @vue/cli 不可简写

使用vuecli 初始化Vue项目

  • vue -V 查看版本号
    使用vuecli 初始化Vue项目
    配置环境变量vue.cmd
    使用vuecli 初始化Vue项目使用vuecli 初始化Vue项目
  • 桥接工具:使用2版的vue指令区创建项目
npm install -g @vue/cli-init

使用vuecli 初始化Vue项目

2、初始化项目

  • vue init 项目模板 项目名 //初始换项目,生成项目模板
    webpack-simple最简单的项目模板
    以下命令:初始化一个项目名叫vuehello的简单模板的vue项目
vue init  webpack-simple vuehello

dos使用utf-8
使用vuecli 初始化Vue项目

3、测试结果

cd vuehello
npm install
使用vuecli 初始化Vue项目

npm run dev
使用vuecli 初始化Vue项目

使用vuecli 初始化Vue项目

4、项目打包部署上线

cnpm run build

完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。