安装vue-cli 3.0和注意事项

9,009 阅读3分钟

1.vue-cli旧版本卸载

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

注意:
如上图,在卸载的时候可能会发生卸载不掉的情况,这是npm源问题,可以通过npm换源:npm config set registry https://registry.npmjs.org
更多npm换源问题看这篇文章:blog.csdn.net/wozaixiaoxi…

2.安装vue-cli 3.0

可以使用下列任一命令来安装新版本 npm install -g @vue/cliyarn global add @vue/cli。这里node版本必须在8.9 或更高版本,可以通过node -v检测,如果低于8.9可去官网下载:nodejs.org/zh-cn/downl…

注意: 这里在安装的时候可能会安装的特别慢或者安装不下来的情况,这里可以用cnpm去安装:
1.先导入cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装@vue/clicnpm install -g @vue/cli。(网上有说安装vue-cli 3.0及以上版本不能使用cnpm,只能使用npm,em....这点我也不太清楚)

然后通过vue -V检测版本是否在3.0及以上

3.vue创建

使用vue create admin来创建一个新项目。

这里是让你选择一个preset,下面有三个选项:第一个是我配置过一次以后保存下来的习惯(如果是第一次创建vue-cli 3.0是没有这个选项的),第二个是默认项,第三个是根据你自己的特性手动配置。这里我们选第三个选项。

这里是选择你需要的那些配置,上下选择,空格勾选,这里随便选了这几个,然后回车。

这里是问你是否在router中使用history模式,默认情况下是hash,这里要说说router的两个模式hash和router:hash不用去请求服务器,而history是要去请求服务器,并且在服务器中需要有与之对应的响应,否则会跳到404页面。所以这里选择N。

这里询问你安装哪一种 CSS 预处理语言,我一直用的less,具体区别可以看:blog.csdn.net/pedrojuliet…

这里是问你选择哪个自动化代码格式化检测,我选择配合vscode编辑器的Prettier - Code formatter插件,即最后一个

语法检查方式,这里我选择保存就检测

这边是问你上面你选择的那些配置,例如babel,postcss,eslint这些配置文件放在哪里?第一个是:放独立文件放置,第二个是:放package.json里。这里推荐放单独配置文件,选第一个。

这两个是问你是否将以上这些保存为未来项目的预配置?如果选择是,会让你为这个预配置取个名字。

回车就开始创建新项目了。这里有些人可能会报错,这里只需把node_modules文件夹删掉,重新在命令行输入cnpm i下载即可。
当然也可以使用vue ui以图形化界面创建项目,具体可以看官网:cli.vuejs.org/zh/guide/cr…
通过安装vue-cli 3.0,对比2.0后可以发现文件简化了很多,隐藏了一些平时不太用到的文件,具体配置需要新建一个vue.config文件