入手vue-cli 3.x

笔者环境 macOS node v8.11.3

准备工作

首先查看本地版本

clipboard.png
注:vue-cli需要要8.9+版本,我使用的n模块,进行node版本管理。
因为之前曾经安装2.x版本 所以先执行卸载

clipboard.png

npm

npm uninstall vue-cli -g

使用yarn

yarn global remove vue-cli

卸载完成后 重新使用 npm或者yarn进行安装

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

现在 我用yarn成功安装3.5.5版本
clipboard.png

项目创建

vue create yourProject

clipboard.png
第一个选择是选择默认设置还是去手动选择功能
在这里我选择了默认的包含了基本的Babel+ESLint的预制和yarn
当然也可以选自己定制

clipboard.png
babel:使用babel将最新版的js语法进行转换
typescript:使用TypeScript写源码
PWA:渐进式WEB应用
Router:使用vue-router
Vuex:使用vuex
CSS Pre-processors:css预处理器选择
Linter / Formatter:代码规范选择
Unit Testing:单元测试
E2E Testing:e2e测试

clipboard.png
以上就是项目的根目录,可以看到跟以前相比变得更加简洁
执行build
clipboard.png

启动项目

在vue-cli的项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

npm run serve
# 或者
yarn serve
# 进行调用

clipboard.png

以下说明参考官方文档
1.vue-cli-service serve [options] 【entry】(启动开发服务器)

选项:

  • --open 在服务器启动时打开浏览器
  • --copy 在服务器启动时将 URL 复制到剪切版
  • --mode 指定环境模式 (默认值:development)
  • --host 指定 host (默认值:0.0.0.0)
  • --port 指定 port (默认值:8080)
  • --https 使用 https (默认值:false)

2.vue-cli-service build [options] 【entry|pattern 】(dist 目录产生一个可用于生产环境的包)

选项:

  • --mode 指定环境模式 (默认值:production)
  • --dest 指定输出目录 (默认值:dist)
  • --modern 面向现代浏览器带自动回退地构建应用
  • --target app | lib | wc | wc-async (默认值:app)
  • --name 库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
  • --no-clean 在构建项目之前不清除目标目录
  • --report 生成 report.html 以帮助分析包内容
  • --report-json 生成 report.json 以帮助分析包内容
  • --watch 监听文件变化

3.vue-cli-service inspect [options] [...paths](审查项目的vue-cli webpack config)

选项:

  • --mode 指定环境模式 (默认值:development)

4.npx vue-cli-service help 查看所有命令。

clipboard.png

下面我们来简单使用下
clipboard.png
这样通过命令行工具 我们使用的vue-cli3 构建的项目成功在本地8888端口 运行起来了

clipboard.png

后续

文章内容都很简单基础,后续会跟随这个演示项目进行更新。

阅读 1.2k

推荐阅读
清水的技术栈
用户专栏

闲鱼的爬坑之路、、、

1 人关注
8 篇文章
专栏主页