使用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-cli官网 创建一个项目

由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了,那该怎么办呢?别慌,vue-cli3早就考虑到了这一点,它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。请看下文:

vue-cli3搭建项目之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生成的项目代码结构介绍

posted @ 2020-03-07 20:30  浮华而已-  阅读(1001)  评论(0编辑  收藏  举报