前端之路--vue学习总结(脚手架vue-cli)

vue学习总结

  • 前端之路–前端开发环境搭建
  • 前端之路–vue学习总结(vue-router)
  • 前端之路–vue学习总结(组件封装:父子组件通信)

vue-cli安装

1.如果安装有旧版本先卸载。

npm uninstall vue-cli -g 
#或者
yarn global remove vue-cli

2.通过下面指令安装新的包。

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

3.cmd执行 vue --version查看是否正确安装。
在这里插入图片描述
4.如果还想使用vue-cli2生成项目可以继续执行以下指令。

npm install -g @vue/cli-init

vue-cli3使用

vue-cli官网:https://cli.vuejs.org/
打开VScode控制台键入以下指令。

vue create my-app

1.选择第二个,可以自选配置。
前端之路--vue学习总结(脚手架vue-cli)_第1张图片
2.空格选择截图的配置。
前端之路--vue学习总结(脚手架vue-cli)_第2张图片
3.css预编译语言我一般选择less。
前端之路--vue学习总结(脚手架vue-cli)_第3张图片
前端之路--vue学习总结(脚手架vue-cli)_第4张图片
4.选择好后开始下载依赖。
前端之路--vue学习总结(脚手架vue-cli)_第5张图片
5.安装好之后如下图所示。
前端之路--vue学习总结(脚手架vue-cli)_第6张图片
6.运行项目。

yarn serve

成功运行!
前端之路--vue学习总结(脚手架vue-cli)_第7张图片
前端之路--vue学习总结(脚手架vue-cli)_第8张图片

vue-cli3项目目录结构

前端之路--vue学习总结(脚手架vue-cli)_第9张图片

你可能感兴趣的:(vue)