#安装
关于旧版本
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+)。你可以使用 nvm 或 nvm-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
image.png当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步.
image.png下一步之后问询问你安装哪一种 CSS 预处理语言,根据个人喜好
image.png上面这个是问你选择哪个自动化代码格式化检测.
image.png是否保存刚才的配置,选择确定后你下次再创建新项目就可以用之前的配置,这个也可以修改。
image.pngbabel,postcss,eslint配置文件放的位置
第一个是放独立文件放置 第二个是:放package.json里
这里推荐放单独配置文件
是否将以上这些将此保存为未来项目的预配置吗?你随意选择,点击确定就开始下载模板了
#使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目:
vue ui
上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。
image.png
网友评论