1.Vue-cli脚手架搭建

Vue-cli脚手架搭建

视频演示地址：https://www.bilibili.com/video/BV1fCeperEzS/?vd_source=0f4eae2845bd3b24b877e4586ffda69a

1.前置条件

安装node、npm

我的node版本：v16.13.1

我的npm版本：8.1.2

2.全局安装Vue-cli

安装

npm install -g @vue/cli

查看版本

Vue -V

我的安装版本：

@vue/cli 5.0.8

3.创建项目

创建命令

vue create prjdemo(项目名称)

手动创建的选项，可以根据自己项目的需要选择，以下是一种简单项目的参考

选择手动创建

推荐的包，选择 （Vuex、Router、babel）即可，也可以根据自己的需要添加

选择vue2.x

history模式，选择no

配置放置的位置,选择使用专用配置 In dedicated config files

是否保存为预设： 选择no

选择完毕后，等待创建完成即可

4.工程简单介绍

主体文件介绍

node_module 存放npm下载的各类插件工具

public 用来放公共资源的

src 源代码文件

.browerslistrc 项目配置工具

.gitignore git配置

babel.config.js 转码器配置

package.json 项目的依赖文件

readme 项目说明文档

vue.config.js vue工程的配置文件，可以配置端口地址等

说明: package.json 中的dependencies的区别与devDependencies的区别dependencies，依赖，这些安装包都是程序所依赖的包，需要发布到生产环境的

dev即开发的意思，就是开发环境下的依赖

例如，安装 axios

npm install axios --save-dev 安装到开发

npm install axios --save 安装到生产

index.html页面

public包下的 index.html页面是整个网站页面的主页面，载体，使用#app的dom元素，挂载vue对象；

mian.js 入口文件

整个vue工程的入口文件，这里new了Vue对象，并渲染页面，后续引入全局css、或一些插件都可以在这里引入

router/index.js

路由配置文件

vue.config.js配置文件

Vue工程的配置文件，可以配置项目启动端口、打包配置、插件配置等等