使用vue-cli>=3版本自动生成vue.js+webpack的项目模板
什么是vue-cli
vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本。
安装(全局)
注意,vue-cli都更多久都不知道了,不要再用旧版本安装了,如果看到其它教程还在用旧版本安装的话直接不用看了。
官网那么棒那么全就别在百度找过期教程了。
旧版本:npm install –g vue-cli
新版本:npm install -g @vue/cli
创建项目
命令:vue create my-project
由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了,那该怎么办呢?别慌,vue-cli3早就考虑到了这一点,它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。请看下文:
vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
运行项目
执行创建项目命令后会自动安装所有需要的包,完成后在项目文件夹下运行以下代码:
npm run serve
项目结构介绍
请看下一篇 vue-cli生成的项目代码结构介绍