美文网首页工作生活
Vue CLI 3.0(安装篇)

Vue CLI 3.0(安装篇)

作者: 躲在靴子里的猫 | 来源:发表于2019-07-05 13:39 被阅读0次

    #安装

    关于旧版本
    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

    Node 版本要求
    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。

    安装命令
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    检查其版本是否正确 (3.x):

    vue --version
    

    创建项目

    #vue create

    运行以下命令来创建一个新项目:

    vue create hello-world
    

    警告
    如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过,如果你仍想使用 vue create hello-world,则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

    你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

    image.png

    第一次创建的时候 没有前一个的,后两个默认的,我们就选择最后一个自定义的。如果保存有模版则可以直接从模板生成。
    手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。


    image.png

    当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步.

    image.png

    下一步之后问询问你安装哪一种 CSS 预处理语言,根据个人喜好

    image.png

    上面这个是问你选择哪个自动化代码格式化检测.

    image.png

    是否保存刚才的配置,选择确定后你下次再创建新项目就可以用之前的配置,这个也可以修改。

    image.png

    babel,postcss,eslint配置文件放的位置
    第一个是放独立文件放置 第二个是:放package.json里
    这里推荐放单独配置文件

    image.png

    是否将以上这些将此保存为未来项目的预配置吗?你随意选择,点击确定就开始下载模板了

    #使用图形化界面

    你也可以通过 vue ui 命令以图形化界面创建和管理项目:

    vue ui
    

    上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。


    image.png

    相关文章

      网友评论

        本文标题:Vue CLI 3.0(安装篇)

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