十一月 8, 2018

Vue Cli 3.0变化

与2.0的差异 & 安装

版本3.0提供 GUI (G, graphic)介面,可以降低使用门槛跟挫折,增加对新手使用者友善程度。不过身为一名工程师,使用CLI介面是很合情合理的。 那GUI就不多做介绍了

官网说旧版本的包名称从vue-cli改成@vue/cli,先不管那个包名称是什麽,总之它要说:如果有安装过旧版本,要先移除掉,以下是查询指令及移除指令:

$ vue -V
$ npm uninstall vue-cli -g

还要注意node.js的版本要求是8.9以上
参考:Node.js各作业系统更新方式
移除完旧版本且确认node.js版数后,安装3.0并确认:

$ npm install -g @vue/cli
$ vue --version

创建项目

$ vue create hello-world

键入后选择手动配置设定档Manually select features,会有选单列出:

  • babel:把ES6编辑成大部分浏览器都能运行(建议勾选)
  • TypeScript:熟练/想熟练的人就选吧
  • PWA Support:参考:medium JLin 浅谈PWA网页、知乎 数猫 Vue CLI 3 搭建 PWA,先不选
  • Router:影片说后面会介绍,先不选
  • Vuex:影片说后面会介绍,先不选
  • CSS Pre-proxessors:预处理器,会用的人当然要选(建议勾选)
  • Linter / Formatter:写JS的ESLint规范,对JS熟练的人可以选,影片中有勾选,想试试看的可以在后续选择ESLint + Standard,Airbnb比较难
    剩下两个Testing:测试用,都先不选
  • prefer placing config for Babel, PostCSS, ESLint, etc.? 是在问要将每个设定档独立还是全写在.json裡

安装好之后跟2.0版一样,输入提示的指令:

$ cd projectName
$ npm run serve //這裡不是run dev囉!

完成~

本文永久链接:https://mrcpp.com/?p=98437,转载请注明出处

-- EOF --

相关文章 »