Vue脚手架创建Vue项目

1. 什么是Vue脚手架

1. 中文官方网址

2. 安装3.x版本的Vue脚手架npm install -g @vue/cli，在d盘的web_study下面的vue文件夹下面安装
   

3. 我这里安装了目前的最新版本@vue/cli 4.5.12（不知道后续会不会出事…）可以参考使用4.x版本

2. Vue脚手架基本用法

1. 创建方式

1. 基于交互式命令行方式

vue create vue_proj_01,提示是否选择淘宝镜像安装我选了Y,首先需要进入d盘d:自己的文件夹,D:\web_study\vue下面的图片是第一次不知道的情况下安装的，后面重新安装了在d盘文件夹中；

然后出现

使用上下箭头选择使用手动选择特性，然后回车出现：

使用上下箭头移动>然后空格选中，带*的表示安装这项，之后回车出现：

用同样的方式选择3.x版本的（那我安装4.x干嘛…后面再慢慢探索吧）

选择No，我们用hash模式的；参考回车之后选择校验工具：

然后选择在什么时机下触发代码格式校验Lint on save：每当保存文件的时候校验Lint and fix on commit：每当执行 git commit 提交的时候校验：这里我两项都选了

你喜欢把Babel, ESLint等的配置放在哪里?In dedicated config files：分别保存到单独的配置文件
In package.json：保存到 package.json 文件中:这里我选择第一个单独配置文件；

询问是否保存这次的设置：这里我选择N不保存；

然后出现：

然后使用上面提供的两个命令分别进入vue_proj_01文件夹然后启动项目出现：

然后复制上面的地址8080到浏览器地址栏可以看到：

2. 基于图形化界面自动安装

1. 在cmd窗口输入如下命令，会自动弹出一个窗口，然后需要注意路径问题，我是在web_study下面的vue文件夹下面vue ui的
   
   弹出窗口：
   
   
   下一步之后
   
   与之前命令行方式创建其实差不多的：
   
   等待一会（不知道单词的是我网不好还是有问题…好了没问题嘿嘿）
   
   然后选择：
   
   

3. Vue脚手架自定义配置

用vscode打开创建好了的vue_02,然后在终端npm run serve然后出现：

需要手动点击这个链接才会打开页面，所以我们需要进行配置实现npm run serve之后自动打开文件

1. 第一种方法是在package.json文件里面增加：不过一般不用这种方法

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

2） 第二种方法是创建vue.config.js文件在里面写入内容，然后npm run serve

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