VUE-引入Element---更新中

最新推荐文章于 2022-11-03 20:33:25 发布

LZ520577577

最新推荐文章于 2022-11-03 20:33:25 发布

阅读量1.1k

点赞数 1

分类专栏：学习经历

本文链接：https://blog.csdn.net/LZ520577577/article/details/123674821

版权

vue.js

学习经历专栏收录该内容

13 篇文章 1 订阅

订阅专栏

node 需要安装配置全局路径-> 通过nvm直接解决

1.Vue 创建项目
	需要下载vue 脚手架
	vue create pojo
2.引入element
npm i element-ui -S ->安装慢时通过
cnpm i element-ui -S
然后在main.js中引入 当前是按需引入所以安装完element-ui时 需要下载
 npm install -D unplugin-vue-components->下载慢
 cnpm install -D unplugin-vue-components
 按需引入
 ![按需引入](https://img-blog.csdnimg.cn/853749f34a5a4ec48deec907c8dd5f89.png#pic_center)
 import { Button,Radio} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)
Vue.use(Radio)
3.引入完成安装vue-rout
npm i vue-router@3.2.0 >安装慢
cnpm  i vue-router@3.2.0

==>

router配置
Main.js 文件需要更新
import Vue from 'vue'
import App from './App.vue'
import { Button,Radio} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router';
Vue.config.productionTip = false
Vue.use(Button)
Vue.use(Radio)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')


1.创建文件夹router
	创建index.js
	![路径](https://img-blog.csdnimg.cn/1b678e2c3d5548b2bf51247091127268.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATFo1MjA1Nzc1Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
	
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

此处有小写
const routers=[
    {
        path:'/',
        name :'Home',
        compoent: () => import('../views/Home.vue')
    }
]
const router =new VueRouter({
    mode:'history',
    routers,
})
export default router

2.创建views包
![内容](https://img-blog.csdnimg.cn/039c7e7e209d456786afb9eeb6392c0d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATFo1MjA1Nzc1Nzc=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

3.在APP.js中 引用
<router-view></router-view>

然后在HelloWord.APP 里面引入

 <router-link to='/'>
    <el-button>按钮</el-button>
    
    </router-link>
     <router-link to="/user">Go to Foo</router-link>
<router-link to='/user'>  
<el-button type="primary">主要按钮</el-button>
     
</router-link>

在Home.vue 中<template>
   <template>
    <el-container style="height:100%">
  <el-aside width="auto">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>
</template>
<script>
export default{
    name :'Home',
    data (){
        return {}
    }
}
</script>
<style lang="less" scoped>
.el-header {
 background-color: #333;
}
.el-main {
    padding-top: 0px;
}
</style>

需要下载 less 和 less-loader
npm i less 
npm i less-loader

然后在 main.js按需引入