vue-el-admin 练习项目【未完结】【菜鸟笔记】

859
129 阅读4分钟

npm

命令详解

npm i 就是npm install 简写
npm i xxx -D   就是 npm i xxx --save-dev
npm i xxx -S   就是 npm i xxx --save
npm i xxx -g   就是 全局安装
npm i xxx      就是 npm i xxx --save

npm i xxx --save-dev 是把依赖写入进devDependencies对象里面
npm i xxx --save 是把依赖写入进dependencies对象里面
npm i xxx -g 就是安装到全局下，在命令行的任何地方都可以操作，不会提示“命令不存在等错误”

作用 【一般这个配置在package.json文件中】

  • devDependencies 是开发环境下的依赖，这里是开发环境下的依赖，上线后非必需，比如：webpack，gulp等压缩打包工具.

  • dependencies 是生产环境下的依赖，项目刚需的依赖在这里，比如UI框架，字体文件等线上必需的东西.

2.1 安装创建vue项目和配置

  1. 安装：
npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve
  1. 配置vue.config.js (关闭保存代码错误提示)
module.exports ={
  lintOnSave:false
}

也可以通过vue ui 图形化的方式去配置

2.1. 第一次打开会出现vue项目管理器

2.2 点击导入

2.3 导入当前项目

2.4 项目导致成功后，选中配置

2.5 选择 ESLint configuration 配置

2.6 点击 保存时检查后的按钮

2.7 点击 保存修改

2.8 回到项目，在src同级目录，会创建一个vue.config.js文件

2.9 vue.config.js文件中自动生成的代码：

module.exports ={
  lintOnSave:false
}

2.2 安装element-ui和基础使用

在项目所在文件路径下：

vue add element 


// 会提示：
// ? How do you want to import Element? 【您希望如何导入元素？】
// Fully import 【完全导入】
// ? Do you wish to overwrite Element's SCSS variables? 【是否要覆盖元素的SCSS变量？】
// Yes
// ? Choose the locale you want to load 
// zh-CN

会多出来一个el-button 的按钮，表示安装完成，【记住，是全局引入的】

2.3 配置HBuilderX 代码块

  1. 打开HBuilderX编辑器，选择工具

  2. 代码块设置

  3. vue代码块

// 配置el-link的代码块

"eLink":{
    "body":["<el-link type=\"primary\" href=\"#\">$1</el-link>"], // |表示转义  $1表示代码块打完，光标停留的位置
    "prefix":"elink",
    "scop":"source.vue.html"
}

2.4 引用Bootstrap4

Bootstrap4 官网


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

复制上面的 <link> 样式表粘贴到网页 <head> 里面，并放在其它CSS文件之前.【粘贴到本项目中的public/index.html的title标签下面】

使用Bootstrap4的卡片

// App.vue
<div class="container">
	<div class="card mt-5 border-primary">
		<div class="card-header bg-primary text-white">头部</div>
		<div class="card-body">内容</div>
		<div class="card-footer">底部</div>
	</div>
</div>

2.5 安装vue-router和使用

  1. 在项目所在目录执行命令：
npm install vue-router --save

--save 是把依赖写入进dependencies对象里面【生产依赖】【运行依赖】

  1. 在src文件中，新建router.js
// router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: []
})
  1. 在main.js引用router.js
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from "./router.js"  // 添加这句

Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。

new Vue({
  router,  // 添加这句
  render: h => h(App),
}).$mount('#app')

  1. 新建一个views文件，用来存放视图文件

  2. 在views文件中，新建layout.vue文件

// layout.vue

<template>
  <div style="">
    <div>主布局</div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>
  1. 配置router.js中的详细路由
// router.js

import Vue from 'vue'
import Router from 'vue-router'
import layout from './views/layout'  //引入根目录下的home.vue组件

Vue.use(Router)

export default new Router({
    routes: [              //配置路由，这里是个数组
        {                    //每一个链接都是一个对象
            path: '/',         //链接路径
            name: 'layout',     //路由名称，
            component: layout   //对应的组件模板
        }
    ]
})
  1. 在App.vue 设置路由的出口
// App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>
  1. 效果图

  1. 在views文件下，新建login文件，在login文件中新建index.vue
// index.vue

<template>
 <div>
   <div>登录</div>
 </div>
</template>
<script>
</script>
<style>
</style>
  1. 配置router.js，因为登录login页面与layout不在一个页面中
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import layout from './views/layout'  //引入根目录下的home.vue组件
// import login from './views/login'  //引入根目录下的study.vue组件

Vue.use(Router)

export default new Router({
    routes: [              //配置路由，这里是个数组
        {                    //每一个链接都是一个对象
            path: '/',         
            name: 'layout',     
            component: layout  
        },
        {
            path: '/login', //链接路径
            name: 'login', //路由名称，
            component: ()=>import('./views/login/index.vue')  //对应的组件模板
        }
    ]
})
  1. 效果

  1. 实现点击左边区域列表，右边区域切换
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import layout from './views/layout'  //引入根目录下的home.vue组件
// import login from './views/login'  //引入根目录下的study.vue组件

Vue.use(Router)

export default new Router({
    routes: [              //配置路由，这里是个数组
        {                    //每一个链接都是一个对象
            path: '/',         //链接路径
            name: 'layout',     //路由名称，
            component: layout,   //对应的组件模板
            children: [
                {
                    path: '/index',
                    name: 'index',
                    component: () => import('./views/index/index.vue')
                }
            ]
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('./views/login/index.vue')
        }
    ]
})

12.1 在views文件下，新建index文件，在index文件中新建index.vue

// index.vue

<template>
 <div style="">
   <div>后台首页</div>
 </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>

12.2 在layout.vue中配置路由出口

// layout.vue

<template>
  <div style="">
    <div>主布局</div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
</style>

12.3 效果图：

12.4 项目到此的目录结构图：

avatar
文章
阅读
粉丝