Vue-cli安装与项目新建

Vue脚手架安装与新建项目

  • 安装步骤
  • 新建项目

安装步骤

1、首先 去下载一个cnpm (注释:淘宝npm镜像,用淘宝镜像npm下载一些配置文件会更快一些)

操作如下:电脑右下角 window输入cmd, 把npm install -g cnpm --registry=https://registry.npm.taobao.org复制到cmd里面去执行就可以了。
在这里插入图片描述
2.安装vue文件

cnpm install i vue -S

3.安装vue脚手架

cnpm install -g @vue/cli
cnpm install -g @vue/cli-init

Vue-cli安装与项目新建_第1张图片
Vue-cli安装与项目新建_第2张图片
4、安装上面2个vue脚手架配置文件后,基于图形化界面的方式,创建新版vue项目:

vue ui

Vue-cli安装与项目新建_第3张图片
Vue-cli安装与项目新建_第4张图片
5.一些需要了解的 vue脚手架目录
Vue-cli安装与项目新建_第5张图片

新建项目

1、选择新建项目的路径,并点击下方的在此创建新项目
Vue-cli安装与项目新建_第6张图片
2、输入项目名称,下一步
Vue-cli安装与项目新建_第7张图片
3、选择一套预设,可以选择手动配置。
Vue-cli安装与项目新建_第8张图片
4、勾选Babel、Router、Linter/Formatter和使用配置文件,下一步
Vue-cli安装与项目新建_第9张图片
Vue-cli安装与项目新建_第10张图片
5、如图选择,并点击下方的创建项目
Vue-cli安装与项目新建_第11张图片
6、之后会弹出是否将保存为预设的窗口,根据需要选择。选择后会开始创建项目,需要等待一段时间
Vue-cli安装与项目新建_第12张图片
Vue-cli安装与项目新建_第13张图片
7、创建完成后会自动打开仪表盘,选择插件——添加插件,搜索element插件并安装
Vue-cli安装与项目新建_第14张图片
8、安装完成后进行简单的配置,并点击完成安装
Vue-cli安装与项目新建_第15张图片
9、安装完成后,选择依赖——添加依赖,在运行依赖中添加axios即可
Vue-cli安装与项目新建_第16张图片

参考文献:
https://www.cnblogs.com/Aangle-long/p/11600966.html
https://www.cnblogs.com/yshang/p/11238513.html

你可能感兴趣的:(Vue-cli安装与项目新建)