脚本宝典收集整理的这篇文章主要介绍了入手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-router
Vuex:使用vuex
CSS 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】(启动开发服务器)
选项:
2.vue-cli-service build [options] 【entry|pattern 】(dist 目录产生一个可用于生产环境的包)
选项:
3.vue-cli-service inspect [options] [...paths](审查项目的vue-cli webpack config)
选项:
4.npx vue-cli-service help 查看所有命令。
下面我们来简单使用下
这样通过命令行工具 我们使用的vue-cli3 构建的项目成功在本地8888端口 运行起来了
文章内容都很简单基础,后续会跟随这个演示项目进行更新。
以上是脚本宝典为你收集整理的入手vue-cli 3.x全部内容,希望文章能够帮你解决入手vue-cli 3.x所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。