Vue2 脚手架模块化开发 -快速入门

为什么需要 Vue Cli 脚手架

目前开发模式的问题

1. 开发效率低
2. 不够规范
3. 维护和升级, 可读性比较差 Vue Cli 文档地址: https://cli.vuejs.org/zh/

环境配置，搭建项目

学习这一块的时候使用的是Vue2

1. 搭建 Vue 脚手架工程，需要使用到 NPM(node package manager), npm 是随 nodejs 安装的一款包管理工具, 类似 Maven。所以我们需要先安装 Nodejs
2. 为了更好兼容 ，这里我们安装 node.js10.16.3（写文档的时候使用了14.17.3）
3. 如果以前安装过 node.js , 为防止版本冲突，先卸载之
4. 下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/
5. 安装 node.js10.16.3 , 直接下一步即可
6. 验证是否安装成功, 如果看到不到, 退出 cmd, 重新开一个窗口测试即可 7.先删除以前的 cli 版本<不论是之前未下载或没有下载>

   相关信息

   npm uninstall vue-cli -g

7. 安装淘宝镜像-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 是从国内下载东西 ::: 9.安装 webpack 和 webpack-cli , 指令: npm install webpack@4.41.2 webpack-cli -D （webpack 是一个打包工具） 10.安装 cnpm install -g @vue/cli@4.0.3 11.确认 Vue-Cli版本 12.创建目录 vue_project, 并 cmd 到该目录 13.使用 webpack 创建 vue 脚手架项目 (提醒：如果出现了 downloading template....,60s 退出窗口，重新来操作一次即可)

vue init webpack 《项目名》

14.浏览器访问 http://localhost:8080

IDEA 打开项目，运行项目

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

Vue项目结构分析

image.png

Vue 请求页面执行流程

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

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' //完整写法是 import App from './App.vue'
import router from './router' //完整写法是 import router from './router/index.js'
//引入elementUI组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

/* eslint-disable no-new */
new Vue({
  el: '#app',//这里的#app 是挂到 index.html 的 <div id="app"></div>
  router,//完整写法是 router: router, 第二个 router 是 import router[这里] from './router'
  components: { App },//完整写法是 components: { 'App':App } 因为名字相同可以省略 'App'
  template: '<App/>' //这里的 '<App/>' 的 App 就是上面 components 引入的组件的名字
})

路由切换-应用实例

需求

浏览器访问 localhost:8080/#/hello

代码实现

<!-- 组件的三个部分 template script style -->
<template>
  <div>
    <h1>Hello, {{name}}</h1>
  </div>
</template>

<!-- script: 数据/行为 -->
<script>
export default {
  data(){
    return {
      name:"LiAng"
    };
  }
};
</script>

<!-- style: 样式 -->
<style scoped>

</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//一定要引入 Hello.vue 组件 @表示 src 目录
import Hello from "@/components/Hello";

Vue.use(Router)

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

image.png