乐趣区

入手vue-cli 3.x

笔者环境 macOS node v8.11.3
准备工作
首先查看本地版本
注:vue-cli 需要要 8.9+ 版本,我使用的 n 模块,进行 node 版本管理。因为之前曾经安装 2.x 版本 所以先执行卸载

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 版本
项目创建
vue create yourProject
第一个选择是选择默认设置还是去手动选择功能在这里我选择了默认的包含了基本的 Babel+ESLint 的预制和 yarn 当然也可以选自己定制
babel:使用 babel 将最新版的 js 语法进行转换 typescript:使用 TypeScript 写源码 PWA:渐进式 WEB 应用 Router:使用 vue-routerVuex:使用 vuexCSS Pre-processors:css 预处理器选择 Linter / Formatter:代码规范选择 Unit Testing:单元测试 E2E Testing:e2e 测试
以上就是项目的根目录,可以看到跟以前相比变得更加简洁执行 build
启动项目
在 vue-cli 的项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
npm run serve
# 或者
yarn serve
# 进行调用

以下说明参考官方文档 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 查看所有命令。

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

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

退出移动版