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