@vue/cli使用教程(初级)

@vue/cli是vue-cli的3.0版本,更新好久了,因为项目中一直没有用到,所以一直没有学习,最近刚好有时间,充充电。

准备工作

@vue/cli要求Node.js版本8.9或者更高,所以先检查一下Node.js版本。

node -v

我从来不担心这个,我是一个喜新厌旧的人,不管技术跟不跟的上,版本要跟上,我的是v10.14.1

忘掉过去

如果你已经全局安装了旧版本的vue-cli,不要犹豫,踹了它
什么,怎么看,能不能长点心!

vue -V

2.9.6,踹它

npm uninstall vue-cli -g

干的漂亮

迎接未来

npm install @vue/cli -g

等待中。。。
这已经是第二天,不好意思网络有点渣!!!
再看一下版本,已经是3.2.1了
欢呼,雀跃,撒花

创建一个新项目

小的们,操练起来

vue create my-future

不是2.X版本的vue init webpack my-future了哦,我就是想用2.X版本怎么办,那你想去吧,你咋这么梗呢,桥接工具@vue/cli-init拿去

npm install @vue/cli-init -g

接下来会让你选择一个preset

  • default:一个默认的选项包含eslint、babel
  • Manually:手动选择特性

自己的人生怎么能被别人定义,我选择手动选择

  • Babel:用于编写下一代JavaScript的编译器,必须的吧
  • TypeScript:JavaScript的一个超集,很火,不会,又多了一项要学的东西!!!
  • Progressive Web App (PWA) Support:PWA渐进式wabapp,个人理解类似国内微信小程序、快应用
  • Router:路由,不解释
  • Vuex:状态管理,也不解释
  • CSS Pre-processors:css预处理
  • Linter/Formatter:代码风格
  • Unit Testing:单元测试
  • E2E Testing:端到端测试

选择你需要的特性,会不会用的我都选了,根据你选择不同的特性,后边会有不同的选项

  • Use class-style component syntax?:使用 类 风格的组件语法
  • Use Babel alongside TypeScript for auto-detected polyfills?:用Babel与TypeScript一起用于自动检测polyfills
  • Use history mode for router?:路由使用history模式
  • Pick a CSS pre-processor:CSS预编译选择

Sass/SCSS
Less
Stylus

  • Pick a linter / formatter config:选择代码风格控制

TSLint (选择TypeScript模块出现该选项)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

  • Pick additional lint features:选择代码风格额外的功能

Lint on save:保存的时候检测
Lint and fix on commit (requires Git):提交的时候检测,需要Git

  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?:你更喜欢将Babel、PostCSS、ESLint等配置放到那

In dedicated config files:各自专用的文件
In package.json:放在package.json文件中

  • Save this as a preset for future projects?:将以上配置保存,以后可以直接用

项目开始自动安装依赖包

运行项目

cd my-future    // 进入项目根目录
npm run serve   // 运行项目

不再是npm run dev,有点不习惯呢

打包

npm run build

还是原来的味道

项目结构

感觉更简洁,
src还是那个src,
dist也还是那个dist,
但是。。。,
config呢,
build呢!!!
遇到哪些奇葩需求我该怎么办?
等我学习一段时间再看吧

更多相关知识
@vue/cli官网

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容