使用vue-cli构建Vue项目

之前分享过 不使用vue-cli，一步一步构建Vue项目（小白入门），这篇文章是主要是为了更好的理解运行时构建vue项目（都是以.vue为后缀的独立组件）的构建过程和webpack相关功能的，对vue初学者比较友好。

但是因为市场需要或者说是趋势，需要更成熟的vue项目架构，且能快速初始化一个vue项目，所以使用vue-cli也成为了开发vue项目的重要技能。

1、node安装

vue-cli的使用是需要Node环境的，去Node.js中文网下载node安装包就可以了，按着向导一步步走安装完成就可以了。

2、安装vue-cli

node安装完成后，在你想创建项目的文件夹内空白处，按住键盘shift键，鼠标右键菜单，点击在此处打开命令窗口，即可在当前路径下打开cmd窗口，输入命令：npm install vue-cli -g

回车执行。-g 代表全局安装，这样你在任何文件夹路径里，都可以使用vue-cli的命令。

输入命令：vue --version 显示版本号

即代表vue-cli安装成功。至此，初始化vue项目所需的环境就全部安装完成了，然后就可以开始生成项目了。使用命令：vue init webpack demovue

意思是使用webpack作为模板，初始化一个名称为demovue的项目，之后会出现一些配置选项，按照你的需求选择 Yes or No

项目初始化需要网络环境，记得要保证电脑连接网络呦！

经过上述配置一路回车下来，程序就会执行，几十秒后，你的当前文件夹下就会出现一个 demovue 的文件夹，文件夹内就是你的项目结构了。

打开文件夹，在 demovue 文件夹中，打开 cmd 命令窗口，输入命令： npm run dev

即可打开刚刚生成的vue项目了。

如果命令失败，请确认路径是否正确，必须在 demovue 文件夹下（如：D:\test-demo\demovue）执行此命令。

程序执行完成以后，虚拟服务器启动完成，会自动打开浏览器预览项目，如果没有自动打开，在浏览器中输入生成的地址（如：http://localhost:8080），即可预览项目。

在config/index.js 中可修改配置 autoOpenBrowser: true 在下次打开项目时，就会自动打开浏览器进行项目预览了。

src 文件夹中就是所有的项目源码，包括入口文件（main.js）、路由、组件（.vue），然后根据你的项目需求，大展身手吧！

往期历史文章：

• 不使用vue-cli，一步一步构建Vue项目（小白入门）
• vue实现全选全不选
• vue地址去掉 #
• vue-cli+webpack打包路径报错问题
• vuex听说很难？

关注公众号【前端很忙】