Vuejs入门②

第一个vue-cli项目

1、什么是vue-cli

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

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

项目的功能：

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

2、需要的环境

Node.js：http://nodejs.cn/download/

安装就是无脑的下一步就好，安装在自己的环境目录下
Git：https://git-scm.com/downloads

镜像：https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功：

• cmd下输入node -v，查看是否能够正确打印出版本号即可！
• cmd下输入npm -v，查看是否能够正确打印出版本号即可！
• 这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

安装Node.js淘宝镜像加速器（cnpm）

这样的话，下载会快很多

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！

安装vue-cli

cnpm instal1 vue-cli-g

#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

3、第一个vue-cli应用程序

1、创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在E盘下新建一个目录
　　E:\vue

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

#这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可；

说明：

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

初始化并运行

 执行完成后，目录多了很多依赖

webpack使用

1、什么是Webpack

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

Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；
??
伴随着移动互联网的大潮， 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里， 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能， 网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA（单页面应用) ， 每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。

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

2、模块化的演进

Script标签

<script src = "module1.js">script>
<script src = "module2.js">script>
<script src = "module3.js">script>

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域。

这种原始的加载方式暴露了一些显而易见的弊端：

• 全局作用域下容易造成变量冲突
• 文件只能按照

  快速上手

  我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；

  1、创建工程

  注意：命令行都要使用管理员模式运行

  1、创建一个名为hello-vue的工程vue init webpack hello-vue

  2、安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

  #进入工程目录
  cd hello-vue
  #安装vue-routern 
  npm install vue-router --save-dev
  #安装element-ui
  npm i element-ui -S
  #安装依赖
  npm install
  # 安装SASS加载器
  cnpm install sass-loader node-sass --save-dev
  #启功测试
  npm run dev

  3、Npm命令解释：

  • npm install moduleName：安装模块到项目目录下
  • npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
  • npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写
  • npm install -save-dev moduleName：–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写