vue脚手架创建vue项目

安装步骤

1、安装node.js，下载地址：https://nodejs.org/en/download/
然后在cmd中测试一下是否安装成功，输入node -v，npm -v

2、安装3.x版本的vue脚手架，输入npm install -g @vue/cli
查看是否安装成功，输入vue -V

创建vue项目

1、基于交互式命令的方式创建新版vue项目：
vue create my-project
上下箭头选中最下面的手动选择模板。第一种是之前创建的项目模板，第二三是默认模板。

单击空格选择想要安装的功能

选择vue.js的版本这里我选择了3.0

选择哪种模式的路由，Y代表选择历史模式的路由，n代表选择hash模式的路由。

选择标准类型的ESLint

选择什么时候进行es语法校验，选择第一项。

第一种创建单独的配置文件，第二项是统一放入package.json文件中，这里选择第一项，方便维护，结构清晰。

以上所有配置选项选择保留输入y，不保留输入n

项目创建成功

执行提示命令
cd vue_proj_01
npm run serve
浏览器粘贴http://localhost:8080/并访问

成功进入项目查看项目效果

2、基于图形化界面的方式创建vue项目：vue ui


点击创建

选择要创建的项目的位置，方便查看的话可以在桌面创建一个文件夹，这里选择Desktop然后找到你创建的文件夹，点击在此创建新项目。

这里只需要填写项目名称和初始化git仓库建议

第一次使用点击手动配置项目紧接着下一步

只需要开启Babel、Router、Linter/Formatter，最后把使用配置文件给开启，剩下的用到再安装

vue.js版本选择、路由模式选择、es语法校验标准及时间。和第一种创建项目的方式一样。

保存这些预设，方便下次创建项目不用耗时间选择。

创建成功来到项目仪表盘

点击左侧的任务导航，选择serve,点击运行

项目编译成功，点击启动app

成功进入到项目中。
3、基于2.x的旧模板创建旧版vue项目：
npm install -g @vue/cli-init
vue init webpack my-project

vue脚手架的自定义配置

1、通过package.json配置项目

"serve": "vue-cli-service serve --open"

2、新建vue.config.js文件

module.exports = {
    devServer: {
        // 自动打开浏览器
        open: true,
        // 更改端口号
        port: 8018
    }
}