Vue-cli搭建项目

目录

一.介绍Vue-cli

二.Vue-cli搭建

1.需要的环境(Node.js)

2.npm

3.配置Node.js环境

4.创建Vue-cli项目

5.设置目录

6.配置组件路由

7.在main.js中配置路由

8.在App.vue中配置路由显示

9.检查是否搭建成功

三.总结

1.对应每一个目录的作用:

2.文件之间的关系

---

一.介绍Vue-cli

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义好的目录结构以及基础代码，就好比在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，让我们的开发更加快速。

二.Vue-cli搭建

1.需要的环境(Node.js)

简单的来说Node.js是一个前端js运行环境或者说是一个JS语言解释器

现在前端都采用单页结构,一个项目中只有一个html文件,其他的内容都写在vue文件中,每个vue文件就是一个组件,我们会为每个组件配置一个访问地址(路由),通过地址访问组件,在唯一的html文件中切换不同的组件,这样我们只需要配置一次框架,依赖(jar包)也只需要导入一次

2.npm

npm是Node.js的包管理工具,用来安装各种Node.js的扩展.npm是JavaScript的包管理工具

3.配置Node.js环境

去官网直接下载安装即可Node.js 中文网

测试是否安装成功,win+r输入cmd打开终端:

输入:npm -v 查看npm版本

输入:node -v查看node版本

4.创建Vue-cli项目

创建时需要等待一会资源下载,博主这里使用的vue2所以创建的是(2.6.10)版本

5.设置目录

刚创建好的项目,目录如下: