使用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 不可简写
- vue -V 查看版本号
配置环境变量vue.cmd
- 桥接工具:使用2版的vue指令区创建项目
npm install -g @vue/cli-init
2、初始化项目
- vue init 项目模板 项目名 //初始换项目,生成项目模板
webpack-simple最简单的项目模板
以下命令:初始化一个项目名叫vuehello的简单模板的vue项目
vue init webpack-simple vuehello
dos使用utf-8
3、测试结果
cd vuehello
npm install
npm run dev
4、项目打包部署上线
cnpm run build
完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。
上一篇: 安装vuecli和使用elememtUi