vue脚手架

vue 脚手架的基本使用

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 实现的交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

安装脚手架

全局安装

npm install -g @vue/cli

命令方式创建项目

vue create my-project

图形化方式创建项目

运行命令

vue ui

自定义配置

在项目目录中，我肯看到了很多配置文件

vue 中做了很多默认的配置，比如 webpack 的默认配置，让我们不需要在自己配置出口，入口文件，以及自己安装加载各种 loader

但是如果默认配置无法满足我们需求，还可以自定义配置

比如希望打包后自动打开浏览器，并指定运行的端口

可以在 package.json 中加入配置

“vue”: {
“devServer”: {
“port”: 8888,
“open”: true
}
}
运行打包命令

npm run serve
会自动打开浏览器并在 8888 端口运行项目

单独配置文件

不建议将上面的配置写道 package.json 中

可以在根目录下创建 vue.config.js 文件来编写配置

module.exports = {
“devServer”: {
“port”: 8888,
“open”: true
}
}