vue的介绍、vue环境安装以及项目目录介绍

一、 vue的介绍

1. MVVM

在vue中，M代表的是数据层，V代表的是视图层，VM实际上是vue实例对象。MVVM并不是取代了MVC,vm只是把c中的展示视图的功能抽取出来，其余视图操作业务还是放在c中

2. 组件理解

图2中标注的部分代表的都是App.vue这一组件，在项目中的main.js中new Vue({})，得到一个vue的实例对象。其中el与index.html中的id="app"相匹配，template：<App/>代表将该模板渲染到index.html的id=app的标签中（在最初没有用vue-cli创建的项目中，每个页面的结构如下，实际上用vue-cli创建的项目也和最初未用其创建的项目结构相同，不过是将js和html部分分开写了）在通过不同的方式创建项目时，不使用-simple的方式创建，在main.js中以图2方式创建vue实例，使用-simple的方式创建，在main.js无template，只有render:h=>h(App)。实际上两者实现的效果是相同的。在生命周期中，会在create之后beforeMount之前判断是否有template，如果有则将模板传入render函数中，render函数将模板挂载在页面上（见图三）。整个项目只有一个Vue实例，其余组件都最终会被组合到App.vue中，然后被render函数渲染到页面上 图1： 图2： 图三

二、项目环境安装

1. 安装所需插件

vutur、HTML CSS Support、JavaScript(es6)、open in browser(浏览器跳转)、Vue 2 Snippets…

2. 安装环境、配置

① 安装node(在安装node时会自动安装npm) ② 检查是否有cnpm(在cmd命令窗口下输入cnpm检查)，若没有，则需要安装淘宝镜像 ③ 安装vue:cnpm install vue ④ 安装vue-cli:cnpm install -g vue-cli（在未安装vue-cli时可能会无法查看vue版本/vue不存在的问题） ⑤ 查看vue版本，确保vue安装成功：vue -V

几点疑问以及解答：

npm是什么？ npm:Node Package Manager(包管理器)。它最大的作用是共享代码。当项目中需要的依赖多时，需要引入的依赖包就会变多。此时npm会显得很重要。项目中需要的依赖包可以在代码仓库（代码仓库中存放所有共享代码）中下载，即通过npm下载（当然，仓库必须有这些共享包。这需要各个包的作者将包上传到该代码仓库中，并给其取名。从代码仓库中下载时根据作者起的名称来下载）。下载完的代码会出现在node_modules目录下，项目便可以使用了。vue工程中为什么要下载node? 实际上vue.js是库不是框架。可以直接下载vue.js而不是通过npm install vue的方式下载vue.js。但由于在开发中，用到的包依赖越来越多，一个个导入很麻烦，所以用到打包工具比如==webpack（node.js中的构建工具）==以及npm，可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理。让前端开发更方便。node.js和npm的关系 node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。node和npm是包含关系。当安装了node.js后，npm也已经安装好了（( Node.js 内置了 npm）。npm是node的包管理器webpack是什么？ webpack是一个工具，这个工具可以帮你处理好各个包/模块之间的依赖关系（modules with dependencies），并将这些复杂依赖关系的静态文件打包成一个或很少的静态文件，提供给浏览器访问使用；除此之外，webpack因为可以提高兼容性，还可以将一些浏览器尚不支持的新特性转换为可以支持格式，进而减少由新特性带来的浏览器的兼容性问题。webpack将你从npm中安装的包打包成更小的浏览器可读的静态资源，这里需要注意的是，webpack只是一个前端的打包工具，打包的是静态资源，和后台没有关系，虽然webpack依赖于node环境vue-cli是什么？ vue-cli是脚手架工具，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板（从github上下载模板项目）。为现代前端工作流提供了batteries-included的构建设置。只需要几分钟就可以运行起来并带有热重载。保存时lint校验，以及生产环境可用的构建版本。vue-cli与webpack的关系？ webpack是前端资源模块化管理和打包工具。它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分隔，等到实际需要的时候再一步加载。而它要自动实现这些功能，我们必须要提前编辑好配置文件。vue-cli是脚手架工具，其作用就是用配置好的模板迅速搭建起一个工程项目，就省去了我们的手动配置webpack配置文件的基本内容。

webpack原理图

三、创建项目

vue init webpack 项目名称vue init webpack-simple 项目名称：该方式创建后没有node_modules，需要用命令：npm install手动下载

四、项目目录介绍

1. package.json:项目配置文件

当前应用的描述文件。其中有运行时依赖和开发时依赖。

① scripts中的dev为项目启动内容(其中包含着加载的文件、加载的项目内容，故在运行时写的为：npm run dev) ② dependencies中为当前项目使用的文件（插件），其中^代表版本可升。*代表版本不可升。 devDependenies中为支撑项目成功启动的文件（插件） ③ 当把项目拷贝给另一台机器时，项目打开时会自动下载devDependenies中的插件，而不会自动下载dependencies内的插件。

2. build.js

该文件是打包时使用的，当需要将项目打包时，运行npm build

3. main.js

该文件是主入口文件（在build文件夹下的webpack.base.conf.js中有配置主入口文件）

4. webpack.config.js

在该文件的module的rules中配置相关loader。eg:当下载了less以及less-loader后，若要解析less文件，还需要在rules下进行配置。

5..babelrc:rc->run control 运行时控制，babel的控制文件

es6转es5 2. jsx转js

6. .eslintignore

在其中配置不被eslint检测的文件：可以直接写文件夹/文件

7. config

config里面的index.js配置指定的后端服务的端口号和静态资源文件夹

8. static

static里面放置静态资源和全局css,当webpack打包后在src中的资源路径改变，static的资源路径不变

五、在写代码时几点注意事项

若要引入文件：import Vue from 'vue'(可省略.js后缀)。若引入组件：import 组件别名 from '组件地址'（写组件地址时可不写.vue后缀）每一个组件中只能有一个父元素，组建中可写html,js,cssexport default：暴露出当前组件，其中name为当前组件的名称，data是整个组件的数据域，里面包含组件的数据。若给<style></style>标签里添加scope，则规定当前样式只作用域当前组件。工程解析less需要准备的步骤：解析less文件需要less，还需要less-loader。股为了能够解析less,需要下载less以及less-loader。 ① 安装less：cnpm install less --save-dev(dev代表装到dependencies中) ② 安装less-loader:cnpm install less-loader --save-dev ③ 安装完毕后在webpack.config.js中module的rules中配置解析代码： ④ 写完解析代码后需要在组件的<style></style>中添加属性lang="less",即<script lang="less"></script>。若要引入外部less文件，则需要@import url("less文件地址")