vue修改编码_Vue之cli修改

项目创建完后，网页为初始界面，那么在哪里修改呢？

一、创建新页面

1、创建vue文件

进入项目的components文件夹下，右键创建文件Dashboard.vue。

2、DashBoard写入内容

打开HelloWorld，把里面的内容复制到新创建的DashBoard中。把data中对应的msg修改为dashboard，把name也修改为DashBoard

3、修改路由文件

打开route文件夹下index.js文件。

在开头导入新创建的vue文件，其实是模块。

import DashBoardfrom '@/components/DashBoard'

4、在routes数组中添加一个对象

{

5、此时保存访问一下地址：http://localhost:8080/#/dashboard

访问后说明我们已经成功添加了页面。但是发现地址栏目里多了个#号

6、在router对象里添加属性mode:'history'

再次访问http://localhost:8080/dashboard,没有#号

二、element布局创建

关于element不做介绍，用即可。官网：http://element-cn.eleme.io

1、安装

npm i element-ui-S

打开项目中的package.json，在dependencies中可以发现element已经被添加了

2、创建布局

官网中已经提供了代码，此时我们拿来用即可，直接复制官网代码。

修改本地app.vue文件如下：