IDEA打开vue文件

1.在idea中打开vue文件open

2.idea目录简介

2.1 public中的index.html是一个静态文件

2.2src中assets存放logo图片，也许以后图片都放在里面吧哈哈 我也是小白 

2.3components存放组件。router是路由文件，router中的index.js进行路由文件的设置

2.4views里面是我们写的代码页面。

2.5app.vue是一个入口

2.6mian.js是全局设置

 2.7package.json是前端依赖的配置

以上所有就是前端的目录介绍。

3.我们open的文件在cmd中创建的时候系统自动帮我们把依赖装好了，存放在node_modules中

创建文件的命令行为：（利用cmd创建vue文件详见我下一篇文章）

vue create hello-world

 这个文件我建立在D盘。

5.只需要在cmd中输入两个命令行

cd firstwork（即你刚刚自己创建的文件名字）

npm run serve

即可帮助我们把这个文件写下来，成功效果如图（在此之前你需要利用cd打开文件位置：比如我的文件firstwork'创建在D/课程学习/课程设计/firstwork，则我需要输入命令行：

D：

cd 课程学习

cd 课程设计

）

7.可见我们的端口是：8080,。那么我们可以直接到这个端口来。

我们在浏览器输入这个IP和端口8080并回车

可以看到我们前端的项目页面出来啦！

 图片中界面是我们项目vue前端初始化的界面

 8.玩玩页面 小试牛刀

我们能看到页面之后还需要安装一些组件，比如：element

我们来试试吧~

打开idea界面中的views中的home.vue，我们可以在其中随便添加一些变量或者值

比如在home中添加一个data

用于返回一个message值：hello 铁甲小宝

也可以在页面上加一个标签：

<h1>{{msg}}</h1>将我们刚刚写的文本消息显示出来

写完之后我们回到浏览器 刷新一下，就会看到我们添加的文本信息显示出来了。此过程可能有点缓慢，需要等待。

此过程就是一个数据的绑定。我们利用data（）{

return{

msg:"hello tiejiaxiao"}

} 

定义了一个变量，再<h1></h1>将其显示出来。

9.安装组件element

我们做后台系统需要一个框架，该框架就是element，直接在浏览器搜索element，点击组件。

以下是官网地址 我放下面啦 传送门！

组件 | Element

点击安装 通过命令行：npm i element-ui -S

来安装

安装成功！

在安装element的时候要关闭（ctrl+c）后台打开firstwork的东西即：

 

当然idea中也有控制台 是左下角的terminal

 也可以在idea的terminal下面输入命令行npm i element-ui -S安装element。安装完成后如图：

出现如下这一行说明element已经安装好啦 

此时回到idea的package.json文件中就会出现了element的依赖 

 10.引用element（在main.js里面）

官网中有写 在快速上手里面。传送门：组件 | Element

首先复制这两行import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';到idea的main.js里面

再复制

Vue.use(ElementUI);

还可以在其中指定控件大小，比如将控件改为mini版 小版的：Vue.use(ElementUI,{size:"mini"});或者Vue.use(ElementUI,{size:"small"});也可以不加，不加的话控件会比较大，加的话会更适合我们本身的电脑。

11.尝试在页面上使用element，看其是否生效。（在home.vue里面）

在home.vue中写<el-button>这是一个测试element的按钮</el-button>或者引用上文的msg注意{}

<el-button>{{msg}}</el-button>

写完之后重新启动这个项目。就是在terminal写上之前的命令：npm run serve

运行完之后会有提示信息successful以及IP端口地址根据这个地址即可在浏览器看到效果。

 

在浏览器打开效果如图：

可以看到我们写的两个按钮。按钮默认是白色，如果我们想换个颜色那么我们只需要：在<el-button>中加上 type="danger" 此处我改的是红色，红色是danger。看看对比图吧~

 

 

 此时vue继承element成功！