Vue2 脚手架模块化开发

  |   0 评论   |   0 浏览

Vue2 脚手架模块化开发

https://www.bilibili.com/video/BV1F34y1W7j4?share_source=copy_web&vd_source=8d3eeabb3653b82cefbc70fe4d8892a1

1.为什么需要 Vue Cli 脚手架?

目前开发模式的问题

  1. 开发效率低 2. 不够规范 3. 维护和升级, 可读性比较差

2.需求分析/图解

  1. 需求: 演示使用 Vue 脚手架进行模块化开发, 输入不同的 url, 切换不同页面.
  2. 完成功能如图

image-20220716182258112

image-20220716182311805

3.Vue Cli 文档地址

https://cli.vuejs.org/zh/

4.环境配置，搭建项目

  1. 搭建 Vue 脚手架工程，需要使用到 NPM(node package manager), npm 是随 nodejs 安装 的一款包管理工具, 类似 Maven。所以我们需要先安装 Nodejs

  2. 为了更好兼容 ，这里我们安装 node.js10.16.3再对 Node 升级.

  3. 如果以前安装过 node.js , 为防止版本冲突，先卸载之, 如果你没安装 nodejs, 就不用管

    image-20220716195511467

  4. 下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/

    image-20220716182523379

  5. 安装 node.js10.16.3 , 直接下一步即可

  6. 验证是否安装成功, 如果看到不到, 退出 cmd, 重新开一个窗口测试即可

    image-20220716195924934

  7. 先删除以前的 cli 版本<不论是之前未下载或没有下载>

npm uninstall vue-cli -g

image-20220716200453510

  1. 安装淘宝镜像-cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

npm 和 cnpm 的区别

1) 两者之间只是 node 中包管理器的不同, 都可以使用
2) npm 是 node 官方的包管理器。cnpm 是个中国版的 npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm 
3)  如果因为网络原因无法使用 npm 下载，那 cnpm 这个就派上用场了 
4) 小结: npm 和 cnpm 只是下载的地址不同，npm 是从国外下载东西，cnpm 是从国内 下载东西

image-20220716200720097

​ 9.安装 webpack 和 webpack-cli ,(webpack 是一个 打包工具) 指令:

npm install webpack@4.41.2 webpack-cli -D

image-20220716200903153

​ 10.安装vue脚手架

npm install -g @vue/cli@4.0.3

​ 11.确认 Vue-Cli 版本

image-20220716203913638

12.创建目录 llp-vue_project, 并 cmd 到该目录

​ 13.使用 webpack 创建 vue 脚手架项目 (如果出现了 downloading template...., 60s 退出窗口，重新来操作一次即可.)

如果出现image-20220716204609585

npm install -g @vue/cli-init

image-20220716204704107

image-20220716204714287

image-20220716204749932

image-20220716204803972

14. 浏览器： http://localhost:8080

image-20220716205204812

5.IDEA 打开项目，运行项目

  1. 将 Vue 脚手架项目，直接拖到 IDEA，就可以打开
  2. 配置 NPM

image-20220716210805743

  1. 效果

image-20220716210853327

image-20220716210909904

6.Vue 项目结构分析

  1. 先说项目文件结构, 直接拖文件夹到 IDEA 打开即可

image-20220716211013875

7.Vue 请求页面执行流程

  1. 当我们输入 http://localhost:8080 , 你看到这个页面时怎么来的，这里涉及到如下文件

image-20220716213633116

​ 2. 分析执行流程

image-20220716213659143

image-20220716213708407

8.Vue 项目简写造成理解困难，测试梳理疑惑

  1. 因为 Vue 默认生成的项目代码，使用了很多简写
  2. 整个页面渲染过程中，main.js 是中心，也是连接各个组件，路由器的关键，分析下 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'
import router from './router/index'

Vue.config.productionTip = false

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

image-20220716221834297

9.路由切换

1.需求说明/图解

  1. 根据 Vue 请求执行流程，完成路由切换实例

  2. 输入 http://localhost:8080/#/hello

    image-20220716223532836

  3. 输入 http://localhost:8080/#/

image-20220716223507287

2.代码实现

1.新增组件，src\components\Hello.vue

<template>
  <div>
    <h1>hello,{{mes}}</h1>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        mes: 'llp'
      }
    }
  }
</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>

2.新增路由，src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//推荐使用@符号，不用考虑后续目录的切换
import Hello from "@/components/Hello";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      name: 'hello',
      path: '/hello',
      component: Hello
    }
  ]
})

3.完成测试 http://localhost:8080/#/hello

image-20220716223532836

3.路由切换-应用实例

1、需求说明/图解, 输入: http://localhost:8080/#/llp

image-20220716225227076

2、代码实现

1.新建LLP.vue组件

<!--模板:表示页面视图html-->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <!--    使用elementUI的组件-按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-input-number style="width: 300px" v-model="num" @change="handleChange" :min="1" :max="5"
                     label="描述文字"></el-input-number>


    <!--    引入el-table-->
    <el-table
      :data="tableData"
      stripe
      style="width: 70%;margin-top: 10px;margin-bottom: 10px">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <!--    引入树形控件 el-tree-->

    <el-tree :data="data" :props="defaultProps" style="margin-left: 100px" @node-click="handleNodeClick"></el-tree>

    <table>
      <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
      </tr>
      <tr>
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
      </tr>
      <tr>

        <td>第3行第2列</td>
        <td>第3行第3列</td>
      </tr>
      <tr>
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
      </tr>
      <tr>

        <td>红烧肉<img src="@/assets/2.png" width="100"></td>
        <td>第5行第3列</td>
      </tr>
    </table>
  </div>
</template>

<!--定义数据和操作方法, 默认导出-->
<script>
export default {
  name: "llp",
  data() {//数据池
    return {

      data: [{
        label: '家用电器',
        children: [{
          label: '电视',
          children: [{
            label: '教育电视'
          },
            {
              label: '全面屏电视'
            }
          ]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },

      msg: "Welcome to LLP!",
      num: 1,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleChange(value) {
      //这里我们可以获取到用户增加/减少的值
      console.log(value);
    }
  }
}
</script>

<!--样式,css, 可以去修饰页面视图
前端的要求不高，但是也要会一点
margin: 0 auto; 0 表示上下的边距, auto表示左右居中
-->
<style scoped>
div {
  width: 900px;
  background-color: aliceblue;
  margin: 0 auto;
}

table, tr, td {
  border: 1px solid red;
  border-collapse: collapse;
}

table {
  margin: 0 auto;
  width: 600px;
  height: 380px;
}

h1 {
  color: red;
}
</style>

2.路由index.js新增路由

{ //配置的一组路由
  path: '/llp',
  name: 'llp',
  component: LLP
}

10. ElementUI 使用

1.ElementUI官网

https://element.eleme.cn/#/zh-CN

image-20220716225731217

2.ElementUI 是组件库，网站快速成型工具

3.应用实例-Vue 项目引入 ElementUI

1.需求说明/图解

  1. 在 Vue2 项目中, 使用 ElementUI 组件, 如图

完成测试, 浏览器: http://localhost:8080/#/llp

2.代码演示

  1. 安装 element-ui 组件库, cmd 下进入到项目，指令,这里指定了版本
npm i element-ui@2.12.0

image-20220716230327062

  1. 修改src\main.js

// 引入elementUI组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

//使用ElementUI插件
Vue.use(ElementUI);

// 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'
import router from './router' //import router from './router/index'
// 引入elementUI组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

//使用ElementUI插件
Vue.use(ElementUI);

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

3.修改LLP.vue

<!--    使用elementUI的组件-按钮-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-input-number style="width: 300px" v-model="num" @change="handleChange" :min="1" :max="5"
                     label="描述文字"></el-input-number>

image-20220716230901628

标题：Vue2 脚手架模块化开发
作者：llp
地址：https://llinp.cn/articles/2022/07/16/1657983331945.html