美文网首页
vue-cli3快速搭建项目步骤

vue-cli3快速搭建项目步骤

作者: 橙色流年 | 来源:发表于2019-05-28 14:48 被阅读0次

    尤大大作为微博段子手,总是一般说放心放心半年内不会推出vue3.0,然后一边闷声放大招。vue-cli3出来有一段时间了,但是记性确实不太好,总是在搭建的时候需要找度娘,只好拿起小本本自己记录一番。

    点此查看vue-cli3官方官网文档,两个小问题需要注意:

    1. npm 更至最新
    2. node >=8.9
    vue create

    运行命令快速创建项目

    vue create books
    
    图1

    如果你第一次使用vue-cli3创建,会出现下面2个,如果选择保留了上次创建的记录作为快捷方式创建,就会出现第一个。按键盘上下键可以选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了,在这里我们选择手动来完成创建步骤。

    图2

    默认选择了babe和eslint,此处空格键是选中与取消,A键是全选。具体如下,可根据自己的业务进行选择(比较多的选择可能是router/vues/css/eslint):

    TypeScript 支持使用 TypeScript 书写源码
    Progressive Web App (PWA) Support PWA 支持。
    Router 支持 vue-router 。
    Vuex 支持 vuex 。
    CSS Pre-processors 支持 CSS 预处理器。
    Linter / Formatter 支持代码风格检查和格式化。
    Unit Testing 支持单元测试。
    E2E Testing 支持 E2E 测试。

    图3

    这里会选择css的预处理,给出了stylus/less/scss三种,根绝个人喜好,一般我用的是stylus。接着就是 eslint 规范的选择也是给出了3种选择,一般我们会选择最后一个,至于为什么安利最后一个,可以参考一篇不错的回答:使用ESLint+Prettier来统一前端代码风格

    图4

    回车之后又会给你一个选择,语法的检查方式。第一个是保存时检查,第二个是fix和commit的时候检测,此处一般选择第一个。

    图5

    接下去会提示你配置文件的存放地方,第一个是独立文件夹位置,第二个是在package.json中。

    图6

    接下来会提示你是否保存这些配置下次进入直接使用,这里根据自己选择来决定。

    图7

    经过等待下载之后我们就已经成功完成了该项目的创建,接下来跟着提示走即可成功打开项目。

    相关文章

      网友评论

          本文标题:vue-cli3快速搭建项目步骤

          本文链接:https://www.haomeiwen.com/subject/xbxdtctx.html