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

文章目录

一、概述1、什么是脚手架？2、安装 3.x 版本的 Vue 脚手架： 二、基于3.x版本的脚手架创建vue项目1、 基于 交互式命令行 的方式，创建 新版 vue 项目2、基于ui界面创建Vue项目3、基于2.x的旧模板，创建Vue项目 三、分析Vue脚手架生成的项目结构四、Vue 脚手架的自定义配置1、通过 package.json 配置项目2、通过单独的配置文件配置项目

一、概述

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 } }