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成功!

Logo

前往低代码交流专区

更多推荐