vue-cli3创建及配置

全局安装

先安装vue-cli3,即 @vue/cli

npm install -g @vue/cli

查看是否安装成功
命令vue -V 如果版本为3.x,恭喜你,迈出第一步了!

创建项目

这里以项目名为 vue-admin 为例

vue create vue-admin

看到下图所示,这里会列出你以往保存的配置,键盘上下键选择配置,我们选择最后一个,自行配置。
clipboard.png

然后会进入下图所示步骤,按你自己需求选择一些配置,鼠标上下键选择,按空格标记选中状态。选好回车。
vue-cli3创建及配置_第1张图片

继续,看到下图,我选择sass

clipboard.png

继续,这里询问你,把babel,postcss,eslint这些配置文件放哪
1.独立文件放置
2.放package.json里

我选择独立放置
clipboard.png

接下来y,回车就行了,然后就生成了项目。
这里和vue2的运行方式不一样,由原来的npm run dev改成了npm run serve

clipboard.png

运行后:

vue-cli3创建及配置_第2张图片

配置

和cli2版本相比,减少了很多文件(去掉了cli2的build和config等目录)。

vue-cli3创建及配置_第3张图片

那么我们的一些配置,要放到哪里呢??
应在根目录下创建配置文件vue.config.js,举例如下配置,配置了项目使用的端口号,并在项目启动后直接在浏览器打开。

vue-cli3创建及配置_第4张图片

你可能感兴趣的:(vue-cli3创建及配置)