Vue-3-单文件组件

一、安装Vue脚手架工具(新版本)

1.1 先安装node.js环境，下一步下一步即可

管理员运行cmd，查看版本号，有的话说明安装成功

node -v

1.2 更换淘宝的镜像源

npm config set registry https://registry.npm.taobao.org

1.2 脚手架全局安装(只需要一次即可，不用反复安装)

//官网
npm install -g @vue/cli

注意第一次安装的是3.0以下的版本，要3.0以上版本的话要卸载重新安装

 npm uninstall -g vue-cli
 npm install -g @vue/cli

安装成功显示版本号

1.4 创建项目

1.4.1 到你想保存项目的位置创建新的项目

vue create 项目名

1.4.2 选择安装模式

按上下箭头选择自定义安装模式

1.4.3 选择安装的产品

选这三个

1.4.4 no

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2JQp6gn-1604832711772)(C:/Users/CEO/AppData/Roaming/Typora/typora-user-images/image-20201108183636107.png)]

1.4.5 配置文件

选择在哪里保存你的，哪个都可以

是否保存配置文件，no

创建成功

1.5 访问项目

进到项目根目录，打命令

npm run serve

启动成功

访问localhost出现欢迎页面

二、第二种创建方式

输入

vue ui

会自动弹出网页界面，照第一种安装方式选择即可