安装脚手架软件:

1、电脑需要安装node软件: http:/ / nodejs.cn/download/

  • 使用 node -v 查看版本, 目前最高 16.11

2、确保 npm 是中国镜像:

  • 查看当前镜像: npm config get registry
    在这里插入图片描述

  • 设置淘宝镜像: npm config set registry https:/ / registry.npm.taobao.org/
    在这里插入图片描述

在这里插入图片描述

3、利用npm 安装 vue 的脚手架软件

  • 安装命令: npm i -g @vue/cli --force
    i: install 的缩写, 代表安装
    -g: 代表全局安装
    @vue/cli: vue的脚手架软件名称
    –force: 强制替换已安装的旧版本(防止有同学电脑有之前同学的遗留)

4、测试是否安装成功:vue -V 注意是 大写的V
在这里插入图片描述

利用脚手架软件生成项目包

在哪执行,就在哪生
1、 生成命令: vue create 包名
create: 创建
包名: 允许中划线, 不允许下划线
例如: 生成 vue-pro 这个项目包: vue create vue-pro
2、执行前, 确认目录下不存在同名文件夹, 否则会询问是否要覆盖
在这里插入图片描述
3、开始创建
在这里插入图片描述
4、回车创建, 进入生成过程: 选择手动方式, 自定义配置
在这里插入图片描述
5、选择要加载的默认功能项目
在这里插入图片描述
6、路由的默认选择: 直接回车 即可采用默认项Y
在这里插入图片描述
7、css预编译器的选择
在这里插入图片描述
8、配置文件的存储方式
在这里插入图片描述
9、把以上步骤保存起来
在这里插入图片描述
10、配置文件起名, 名称随意
在这里插入图片描述
11、开始下载并安装: 速度与网速有关, 网速不好可能失败!
在这里插入图片描述
12、以后再次创建时:
在这里插入图片描述
13、启动命令
从此以后 Vue部分: 不再使用 live server,因为脚手架的项目包 自带服务器!
启动 项目包 中自带的 服务器, 在 vue-pro 文件夹下打开命令行: npm run serve
在这里插入图片描述

插件

必装: 带有vue语法高亮, vue提示, 报错提示. . . .
在这里插入图片描述
提供各种代码块

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐