Vue项目实战笔记【二】

心已赠人 2021-05-16 20:36 498阅读 0赞

其次是一些依赖（根据自己用到的安装）  
我安装的有

1.  Vue Axios  
    用来发送ajax请求

npm install --save axios vue-axios
    然后在main.js配置
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)

1.  router，配置路由用的

npm install vue-router --save-dev
    然后在main.js配置
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

3.elementUI 绘制界面的，拼拼凑凑，安装和使用直接参考官网  
https://element.eleme.cn/\#/zh-CN/component/quickstart

Vue项目运行是只要你保存文件，页面就更新的。

4.组件路由  
在src目录下新建router文件夹，在router下创建index.js，这样是用来给自己写的组件配置路由的，但是第一步先要让这个index.js生效。  
![在这里插入图片描述][20200502130911952.png]

然后在main.js配置
    import router from './router'
    
    这里是添加了router
    new Vue({ 
    	router,
      render: h => h(App),
    }).$mount('#app')

## 配置完成开始写一个自己的组件 ##

为了方便管理，src下新建目录views，里边放自己写的组件  
![在这里插入图片描述][20200502131521841.png]  
新建vue文件，比如叫Addnew.vue

![在这里插入图片描述][20200502132027939.png]

## 很显然第一个是组件， 写界面的。第二个是js，第三个是样式。 ##

但是这样的模板太简单的，自己适当的加一点

<template>
    	<div>
    		加这个div是因为组件必须有一个root节点，不然会报错
    	</div>
    </template>
    
    <script>
    	这下边写data,methods和狗子函数 
    export default { 
      name: 'app'
    }
    	
    </script>
    
    <style scoped="scoped">
    	这里加scoped是指样式仅作用于当前
    </style>

然后这时候组件还没被注册使用，具体方法是在index.js里配置

import Vue from 'vue'
    import Router from 'vue-router'
    import Addnew from '../views/Addnew.vue'
    
    Vue.use(Router)
    
    export default new Router({ 
    	routes: [
    		{ 
    			path: '/Addnew',
    			name: 'Addnew',
    			component: Addnew
    		}
    	]
    });

然后在App.vue添加router-view![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70]  
在Addnew.vue写些自己的界面，放了一些半成品效果  
运行项目访问网址http://localhost:8080/\#/Addnew  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 3]

[20200502130911952.png]: /images/20210516/f32b96eec89f4206b5298c67d353fe46.png
[20200502131521841.png]: /images/20210516/98fd26f2adcc4a06ab9fcdd2eef90314.png
[20200502132027939.png]: /images/20210516/17bf960fceec45ab9bcf61ea8c39b1d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70]: /images/20210516/aa050df638c647f794ae770ba993ee40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 1]: /images/20210516/e22b6ca4f2c44b8ba7a75d5f91d948e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 2]: /images/20210516/909ef9fa5df7418f95e83f34b7e1714c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODg1NDI5_size_16_color_FFFFFF_t_70 3]: /images/20210516/20a97a351a104805a19f0bf0073c9e96.png