随着时间的推进,我们迎来了vue-cli3.0的面世,越来越图像化和傻瓜式,方便了前端开发的入门。
此文仅以MacOS为例:
  • vue-cli的安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
您可以*.vue使用vue serve和vue build命令只使用一个文件快速进行原型设计,但是它们需要先安装一个额外的全局插件:
npm install -g @vue/cli-service-global
不过在国内环境推荐用cnpm 或者yarn 安装:
cnpm install -g @vue/cli-service-global
yarn add @vue/cli-service-global
  • 创建项目
您可以选择基本Babel + ESLint设置附带的默认预设,也可以选择“手动选择功能”以选择所需的功能
vue create hello-world
Vue-cli3.0实战探究
可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持,那么选择第一项,就完事了,静静等待 vue 初始化项目
vue-cli 内置支持了8个功能特性,可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。
  • TypeScript 支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support PWA 支持。
  • Router 支持 vue-router 。
  • Vuex 支持 vuex 。
  • CSS Pre-processors 支持 CSS 预处理器。
  • Linter / Formatter 支持代码风格检查和格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。
选择默认:
Vue-cli3.0实战探究
$ cd hello-world
$ yarn serve
 
  • 用UI界面创建项目
vue ui
Vue-cli3.0实战探究Vue-cli3.0实战探究Vue-cli3.0实战探究
等待创建成功
Vue-cli3.0实战探究
相比可视化界面来说,没有命令行那么直接和快速,强烈推荐用命令行安装 

相关文章:

  • 2021-05-19
  • 2022-12-23
  • 2022-01-16
  • 2021-07-14
  • 2021-06-08
  • 2021-04-11
  • 2021-05-08
  • 2021-07-10
猜你喜欢
  • 2021-11-14
  • 2021-05-23
  • 2021-07-15
  • 2021-12-10
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案