Vue学习（四十四）——Vue脚手架

一、概述

1、什么是脚手架？

• Vue脚手架可以快速生成Vue项目基础的架构，简化程序员创建Vue项目的过程。
• 现在的Vue脚手架已经升级到3.x版本，即vue-cli3。

2、安装 3.x 版本的 Vue 脚手架：

1、如果mac没有安装node，直接这样安装：

brew install node

2、打开终端，输入下面的命令：

若想卸载之前的版本，输入下面的命令：

npm uninstall -g @vue/cli

npm install -g @vue/cli

如果不指定版本号，默认会安装最新版本的脚手架，一般我们使用比较稳定的版本，最新版本可能变化较大，容易踩坑。

npm install -g @vue/cli@3.6.0

vue2.x版本和vue3.x版本在命令上差别还是蛮大的，参考下面的文章：
https://www.cnblogs.com/csj007523/p/13549825.html
安装完成后，输入vue -V命令可以查看版本号：

二、基于3.x版本的脚手架创建vue项目

1、 基于 交互式命令行 的方式，创建 新版 vue 项目

1、命令

vue create my-project

2、选择Manually select features(选择特性以创建项目)

3、按空格选择需要的模块，按回车确定：

4、不用历史模式，因为我们需要hash模式：

5、语法版本选择下面的这种：

6、默认，下一步

7、配置文件选择单独的文件

8、是否保留配置创建模版，暂时不创建吧。

9、根据提示，我们进入到目录，这些命令：


10、运行地址，就可以看到创建的项目：

项目创建完成：

2、基于ui界面创建Vue项目

1、打开终端，输入：

vue ui

2、创建项目，目录，名称然后下一步：

若第一次创建，可以选择手动配置创建一个模版，后面再创建项目可以使用创建的模版快速创建一个项目：

下面四项必须选：

按下图选择：

注意：这里切记要选择2.x版本的进行创建，最开始使用3.x版本的创建的项目报各种错，要么是依赖的插件的版本号有问题，要么是后面引入element-ui的时候报错，项目无法正常启动，踩了不少坑。

然后创建项目，保存为预设模版：

比如，创建项目出错：

这里我安装的是最新的版本，也就是不给版本号，默认安装最新版。

npm uninstall -g @vue/cli
npm install -g @vue/cli

项目创建OK之后是这样的。

运行serve，启动app可以进入项目首页：

3、基于2.x的旧模板，创建Vue项目

        npm install -g @vue/cli-init
        vue init webpack my-project

参考我之前的文章：https://blog.csdn.net/weixin_44075963/article/details/106533406

三、分析Vue脚手架生成的项目结构

    node_modules:依赖包目录
    public：静态资源目录
    src：源码目录
    src/assets:资源目录
    src/components：组件目录
    src/views:视图组件目录
    src/App.vue:根组件
    src/main.js:入口js
    src/router.js:路由js
    babel.config.js:babel配置文件
    .eslintrc.js:

四、Vue 脚手架的自定义配置

1、通过 package.json 配置项目

// 必须是符合规范的json语法
 "vue": {
       "devServer": 
            { 
            "port": "8888", 
            "open" : true
           } 
},

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

2、通过单独的配置文件配置项目

1 在项目的跟目录创建文件 vue.config.js ;
2 在该文件中进行相关配置，从而覆盖默认配置;

module.exports = {
    devServer:{
        //设置新端口号
        port:8879,
        // 启动项目自动打开浏览器
        open:true
    }
}