Vue脚手架Vue-cli

Vue脚手架的基本使用

基于3.x版本的脚手架创建Vue项目

1. 基于交互式命令行的方式，创建Vue项目
vue create my-project

2. 基于图像化界面的方式创建Vue项目
vue ui

3. 基于2.x的旧版本，创建旧Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

vue脚手架自定义配置

打开package.json文件，它记录了项目所有依赖项

设置vue项目端口和自动打开浏览器

"vue": {
	"devServer": {
        "port": 8080,
        "open": true
    }
}

运行

npm run serve

此时项目将在8080端口打开并自动打开浏览器

• 注意：不推荐这种配置方式。因为package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架相关配置单独定义到vue.config.js配置文件中

  1. 在项目根目录下创建vue.config.js

  2. 在该文件中进行相关配置，从而覆盖默认配置

     //vue.config.js
     module.exports= {
         devServer: {
             port: 8888,
             open: true
         }
     }