Java基础(33)

前端框架基础 vue01

前端开发的变化过程

1、html js css 导入

2、构建工具(编译工具 webpack,vite2) + 新语言（ES6，typescript） + 前端框架(vue,react,agular,flutter…)（数据驱动视图、路由机制）

​ xxx.vue

3、脚手架 CLI

4、SPA： single page application

5、MPA ： multiple page application

6、模块化 node require Import

​ .js css 都会被模块化

二、VUE CLI 使用

• 主流版本 cli2 cli3.x != vue版本

  安装

  安装完成后，就可以使用vue指令来创建和管理一个脚手架项目

  npm i -g  vue-cli    // "2.x"
  npm i -g  @vue/cli   // "默认安装的是最新版本(一般不要安装最新版，防止各个插件版本不匹配)"
  npm i -g  @vue/cli@4.x //"安装指定版本 安装4.x"
  npm uninstall -g vue-cli  //"删除 2.x"
  npm uninstall -g @vue/cli //"删除3.x以上"
  npm i 模块名@版本号
  一般在安装命令行（cli）模块时，我们采用 -g 全局安装，为的是保证安装出来的命令行指令在系统的每个
  目录都可以使用，相当于配置了该指令的"环境变量"
  

  创建项目

  先在cmd中进入要创建项目目录，然后再执行以下指令 cli3.x+

  vue create  项目名
  vue ui      项目的可视化管理工具， 类似于 phpmyadmin
  

  Cli2 创建方式

   vue init webpack  项目名称
  

三、项目架构说明

• public 目录

  +. 该目录中，存放的是htmlwebpackPlugin的模版文件 index.html

  + 该目录也是devserver的开发服务根目录

• src. 目录

  项目代码目录：所有的业务代码都写在该目录中

  • main.js :webpack打包入口文件，所有代码都从该文件开始执行

    import Vue from 'vue';
    import App from 'App.vue' ;
    //创建了 vue实例
    new Vue({
           
       render : h => h(App) //将App.vue中的结构渲染到#app中
    }).$mount