工作生活

Vue CLI 3.0(安装篇)

2019-07-05  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读