vue脚手架入门理解

为了能够快速且系统的理解脚手架，接下来分6个步骤介绍vue脚手架，分别是

1 脚手架的作用，

2 脚手架的安装，

3 脚手架的图形界面，

4 脚手架需要安装的插件，

5 脚手架的项目结构，

6 脚手架的功能语法。

 

1、vuecli的作用:

前端开发时，文件杂乱无章，vue脚手架把跟vue相关的工具集合到一起，方便前端的开发。

2、脚手架的安装:

因为脚手架的一系列工具基于node，所以先安装node，然后通过工具内部存在的npm指令去安装vue。

去官方网站下载最新的node，直接搜这个词，进入官网下载即可，也不拉个网站了。

下载好以后，windiws+R敲cmd命令，然后输入npm-v查看npm的版本。

然后改远程仓库的淘宝镜像，需要输入的永久配置命令是:
npm config set registry https://registry.npm.taobao.org

然后去vue官方，查看npm下载vue的命令敲入:  npm install-g @vue/cli  等待下载。

下载完以后，可以敲入vue-v查看版本

 

3、进入vue的图形界面创建项目:

进去cmd命令，然后敲vue ui 回车进入vue的图形界面。然后创建我们的第一个项目。创建项目按步骤走，其中有个选项需要勾选，如图

 Router需要勾选，Linter需要反选。

4、安装插件和依赖:

在vue ui的界面选择插件和依赖的项，然后进入搜索，下载个相应的插件和依赖。

插件需要安装的是: element ui

依赖需要安装的是: qs，axios，echarts等

5、脚手架项目结构:

把创建好的项目文件拉入随意编辑器，我拉的是HBuider，以下是文件的项目结构，主要是src这个文件夹，里面是需要修改和编辑的文件目录。

 上图是src的下级目录

assets目录主要放一些图片类的东西

components目录放的是要实现页面功能的文件。

router目录放的是路由文件，主要是用来增加一些文件的访问路径。

App文件是主页面文件，需要配置便签以显示自己创建的页面功能，原来带的一些不需要的代码可以删掉。

main文件是入口文件，主要配置一些重要的参数。

项目中有几个示例的欢迎文件，可以删掉，并把自己的页面配置在路由中。

 上图是页面功能编写的文件页面，分三个便签部分，各个部分编写各部分的语法。

6、脚手架的一些功能语法:

★export default { }

this.$axios

this.$qs

this.$router.push("/main1");  跳转命令

 

★router： 路由配置功能文件路径

import Main from '@/components/main1.vue'

{path: '/main1',component: Main}

{path:'/',redirect:'/login'},

 

★app.vue根组件设置:

<router-view></router-view>

 

★main.js项目入口文件设置:

运行项目时自动执行

import axios from 'axios'

import qs from 'qs'

Vue.prototype.$axios = axios

Vue.prototype.$qs = qs

axios.defaults.withCredentials = true;（跨域cookie）

axios.defaults.baseURL = 'http://localhost:8080'; （全局路径）

 

★子路由设置

children:[ 路径 ]

<router-view></router-view>（在想要展示的地方加）

在导航条属性上加：router