vue基础-标准前端化工程

最新推荐文章于 2024-05-19 23:04:13 发布

黄一hl

最新推荐文章于 2024-05-19 23:04:13 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/yilulihuakai/article/details/105513363

版权

本文介绍了如何使用Vue-cli构建标准的前端化工程，包括Vue-cli的安装与基本使用，以及Vue-router的配置和路由模式。同时，提到了Element-ui作为后台组件库的使用，以及Vue-element-admin作为后台管理集成解决方案的角色。文章还涵盖了前端项目的基本目录结构和常见的问题解决策略。

摘要由CSDN通过智能技术生成

标准前端化工程

回顾上节课

前端的体系（前端框架！）

前后端分离的演变！

Vue入门

Vue基本语法

Vue 组件

Vue 路由！

Axios !

Vue-cli

什么是 Vue-Cli

==Vue-cli 是官方提供的一个脚手架！==可以利用它快速生成前端化的工程模板！

功能：

统一的目录！
快速调试！
单元测试！
在线运行
…

环境安装

# 第一次安装可能会有些慢！
npm install vue-cli -g  

# 检测我们安装的vue的应用
vue list

在这里插入图片描述

第一个 Vue-Cli 前端程序

1、新建一个文件夹 vue-cli

2、创建一个基于webpack模板的 vue 应用程序！

vue init webpack myvue

建议初学前端化工程的小伙伴都自己全部选择no！

在这里插入图片描述

3、完善依赖，运行程序，我们下载的所有前端工程一般都没有依赖！

cd myvue  # 进入目录

npm install  # 安装所有依赖

npm run dev # 启动项目

在这里插入图片描述

4、访问测试！

在这里插入图片描述

现在我们就创建了一个标准的前端化工程了，后面的话就基于这个工程进行操作！

流程首先找到package.json 然后看到由index,html 然后去找index.html页面:一个标准的vue的html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后找到Src目录下面的App.vue 是一个页面,里面声明了一个app的class 然后加载了首页的图标

然后找到main.js页面就可以看到vue的声明程序

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

然后我们去找到我们的router文件夹:

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',   url是这个的时候据跳转到helloWorld这个组件中去
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

可以看到由一个组件:然后找到这个组件:

这个就是页面的显示东西

Vue-cli 目录结构分析

在这里插入图片描述

build 和 config ： webpack 配置文件，项目配置文件
node_modules，这个一般在开源项目中都不存在，我们拿到项目的第一步就是安装所有依赖（npm install）
src 项目的源码目录！（Vue项目和 js 代码）
static 静态资源文件！
.babelrc Babel配置文件（ES6语法转换为 ES5语法！）
.editorconfig 编辑器配置
.gitignore git文件忽略配置
.postcssrc.js css 相关的配置文件，就是导入了css的插件
index.html 首页，所有的页面都是通过这里跳转的，实际开发是不使用这个文件的！
package.json 项目的配置文件（名称、版本、描述、作者、依赖、启动脚本 …）

src 目标

src 就是我们编写前端项目的源目录，所有的代码都会写到这里面！

在这里插入图片描述

main.js ，项目的主入口，所有的程序都是有一个主入口的！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

// es6语法，导入组件和依赖！
import Vue from 'vue'    // vue 依赖
import App from './App'  // 导入组件

Vue.config.productionTip = false  // 关闭浏览器控制台关于环境的提示！

/* eslint-disable no-new */
// vue的核心对象
new Vue({
  el: '#app',  // 节点
  components: { App },  // 组件
  template: '<App/>'  // 模板
})

App.vue

<!-- HTML 代码模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>//这个就是component里面的那个helloWorld组件
  </div>
</template>

<!--JS 代码 -->
<script>
// JS 代码, 导入我们自己写的模块！
import HelloWorld from './components/HelloWorld'
// 导入对象App，在其他地方导入的话就可以直接使用了！
export default {
  name: 'App',
  components: {
    HelloWorld  // 组件！
  }
}
</script>

<!--CSS 样式： 如果没有加 scoped 就是全局生效，如果增加了就是当前页面生效！-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

标准的路由

准备

vue-router vue的官方路由器，和Vue无缝集成！

1、在项目中安装 vue-router

在这里插入图片描述

2、就可以在模板化工程中使用它， Vue.user() 在main.js里面写

// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);

测试

1、清空项目的多余内容！

2、定义我们自己的组件！

在这里插入图片描述

<template>
  <div>
    <h1>内容页</h1>
  </div>
</template>

<script>
export default {
  name: 'Content'
}
</script>

3、编写安装路由！

在这里插入图片描述

4、编写我们自己的路由组件

// 导入Vue
import Vue from 'vue'
// 导入我们的路由组件
import VueRouter from 'vue-router'
// 显示的调用Vue路由
Vue.use(VueRouter);

// 导入我们自己写的组件, 不需要增加 .vue 后缀！
import Content from '../components/Content'
import Main from '../components/Main'

// 配置路由
export default new VueRouter({
  // 就是我们上周讲的
  routes: [
    // 规则1 , content 内容页跳转规则！
    {
      path: '/content',
      name: 'content',
      component: Content
    },
    // 规则2
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
})

5、在 main.js 中配置路由！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

// 导入我们的路由规则, 自动识别 index.js
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 挂载路由！
  components: { App },
  template: '<App/>'
})

6、在App.vue中使用即可！

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容</router-link>
    <!-- 出口，展现路由内容的地方！ -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

自己练习一个路由配置！

Vue项目启动报错-http://eslint.org/

当打开项目，输入npm run dev的时候，会出现这样的报错

就是eslint严格语法的错误的时候,只需要将eslint的检查关闭,然后重新启动即可

Errors:
  4  http://eslint.org/docs/rules/no-tabs
  4  http://eslint.org/docs/rules/indent
  1  http://eslint.org/docs/rules/eol-last
  1  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/no-multiple-empty-lines


  ✘  http://eslint.org/docs/rules/semi    Extra semicolon
  src\router\index.js:8:16
  Vue.use(Router);
                  ^

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote
  src\router\index.js:13:13
        path: "/", component: Main
               ^


✘ 2 problems (2 errors, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/quotes
  1  http://eslint.org/docs/rules/semi

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

运行vue项目的时候终端报如下报错

在这里插入图片描述

解决办法
打开config里面的index.js
找到
useEslint: true,

在这里插入图片描述

图片.png

把useEslint: true,改成useEslint:false,

在这里插入图片描述

重新输入
npm run dev
运行程序

在这里插入图片描述
在浏览器里面输入
http://localhost:8083
ok,可以在网页中看到我们的项目了

扩展 404配置

1、编写组件 404.vue

<template>
  <div>
    <h1>页面不存在！404</h1>
  </div>
</template>

<script>
export default {
  name: 'NotFound'
}
</script>

2、路由配置！

// 关于404，路由会优先匹配精准的，然后匹配通用！
{
    path: '*',
    component: NotFound
}

路由模式

hash ：路径会带 # 号

history：不带 # 号，也就是我们常常看见的网页路由！

export default new VueRouter({
  mode: 'history', // 配置路由模式！
  // 就是我们上周讲的
  routes: []
}

配置完毕 !

在这里插入图片描述

Element-ui

ui 库，Element-ui 是饿了么出品的基于 Vue.js 的后台组件库！

官网：https://element.eleme.cn/#/zh-CN

在这里插入图片描述

如何使用！

1、创建文件夹 element-ui

2、下载组件

npm install vue  # vue
npm i element-ui -S  # 安装element-ui

3、为了代码清爽，我一般细化将依赖放入lib目录下
在这里插入图片描述

4、搭建我们的第一个ui界面入门程序

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <!-- 所有的el-开头的标签都是elementui的组件！ -->
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return { visible: false }
    }
  })
</script>

</html>

官网基本组件测试

1、容器（拿来即用）

2、图标（el内置的，也推荐大家使用https://fontawesome.dashgame.com/）

icon="el-icon-search"

在这里插入图片描述

3、对于我们后台程序员来说，大部分情况下都是在和表单进行操作

在这里插入图片描述

开发项目（不知道入怎么开始第一步！）

1、你没有界面清晰的定义（ELEMENT-UI 组件可以直接套用，一定要多去看别的网站如何设计的！）

2、核心：不会设计数据库（先把前端写好，数据库自然就出来了！）

3、后台的就是基本CRUD（最熟悉！）

前端怎么写？

1、见过足够多的组件，拼接组件（基本网页形状！）

2、修改CSS 即可！

使用这样一个模型，设计地图联动的效果

在这里插入图片描述

// leve1 {value,label,children,id,pid} // 自连接比较多
{
    value: 'zhinan',
    label: '指南',
    children: [
        {
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
                value: 'yizhi',
                label: '一致'
            }, {
                value: 'fankui',
                label: '反馈'
            }, {
                value: 'xiaolv',
                label: '效率'
            }, {
                value: 'kekong',
                label: '可控'
            }]
        }, {
            value: 'daohang',
            label: '导航',
            children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
            }, {
                value: 'dingbudaohang',
                label: '顶部导航'
            }]
        }]
},

建议：所有的前端弹窗都建议使用 layer 组件！先下载然后导入包就行,就是一个css样式

Vue-element-admin

现成的组件库！

Vue-element-admin 是一款基于 element-ui的后台管理的集成解决方案（60%前后端分离都用它！）

官网：https://panjiachen.github.io/vue-element-admin-site/zh/

文档：

在这里插入图片描述

如何分析项目

1、查看 config index.js 知道项目的基本配置

2、查看main.js、查看导入了哪些组件

3、查看路由配置文件，寻找到所有的页面组件！

4、分析页面组件（准备的组件化操作：templeate script style）

套路

1、我们在平时使用vue-element-admin 开发的时候，这个完整版的后台脚手架，当做一个工具库！需要什么我们拿来使用即可！

2、我们使用 vue-admin-templeate开发！

编写自己的组件如果想要用一个功能的话,直接从admin上去拿过来即可
注册路由！
后面的就是和 api 进行通信传输数据！

黄一hl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础-标准前端化工程

标准前端化工程回顾上节课前端的体系（前端框架！）前后端分离的演变！Vue入门Vue基本语法Vue 组件Vue 路由！Axios !Vue-cli什么是 Vue-Cli==Vue-cli 是官方提供的一个脚手架！==可以利用它快速生成前端化的工程模板！功能：统一的目录！快速调试！单元测试！在线运行…环境安装# 第一次安装可能会有些慢！npm ...
复制链接

扫一扫