• Vue-06-vue-cli

    7.vue-cli

    • vue-cIi官方提供的一个脚手架，用于快速生成一个Vue的项目模板；

    • 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；：

    • 主要的功能：

      • 统一的目录结构
      • 本地调试
      • 热部署
      • 单元测试
      • 集成打包上线

    • 需要的环境：

    • nodejs:https://nodejs.org/zh-cn/

    • 确认nodejs安装成功：

    cmd下输入node-v,查看是否能够正确打印出版本号即可！
    cmd下输入npm-v,查看是否能够正确打印出版本号即可！

    • 这个npm,就是一个软件包管理工具，就和linux下的apt软件安装差不多！
    • 安装Node.js淘宝镜像加速器(cnpm)
    #-g就是全局安装
npm install cnpm -g

# npm下载模块时候会发现效率真的很慢，所以推荐淘宝的镜像即 cnpm 
npm install -g cnpm --registry=https://registry.npm.taobao.org

虽然安装了cnpm,但是尽量少用！

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 虽然安装了cnpm,但是尽量少用！能用，但打包时出错了。
    cnpm install vue-cli -g
#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

    • 1
    • 2
    • 3
    • 4

    7.1 第一个vue-cIi应用程序

    • 创建一个Vue项目，进入D:\HBuilderProjects目录创建创建一个基于webpack模板的vue应用程序
    #这里的myvue是项目名称，可以根据自己的需求起名
vue init webpack myvuedemo
接下来选择no即可

    • 1
    • 2
    • 3

    • 说明：

      Project name:项目名称，默认回车即可
      Project description:项目描述，默认回车即可
      Author:项目作者，默认回车即可
      Install vue-router:是否安装vue-router,选择n不安装（后期需要再手动添加）
      Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手
      动添加)
      Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
      Setup e2 e tests with Nightwatch:单元测试相关，选择n不安装（后期需要再手动添加）
      Should we run npm install for you after the project has been created:创建完成后直接初始化，选择n,我们手动执行运行结果！

    • 若创建项目时down模板报错时可以通过vue create myvuedemo，但需要升级@vue/cli 为3.0以上，先卸载原先的vue/cl

    npm uninstall -g vue/cli
npm install -g @vue/cli

    • 1
    • 2

    • 初始化并运行

      cd myvuedemo
      npm install //导入依赖环境
      npm run dev //打包并启动

      • 让idea以管理员模式运行

    在这里插入图片描述

    7.2 什么是webpack

    • 本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.

    • Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、.LESS等；

    • 伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6等新的技术来开发丰富的功能，网页已经不仅仅县完成浏览器的基本需求；WebApp通常是一个SPA(单页面应用)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带
      来了巨大挑战。

    • 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

    • 模块化的演进:Script标签