初识Vue.js

Posted 2021-05-01 ExcellentFramework

    Vue.js是一套适用于H5开发的前端框架。Vue.js相对于React，AngularJs是比较轻量级的。对她总体评价，可以说是“简单却不失优雅，小巧而不乏大匠”，真是一个“小清新”。Vue.js官网就是一个很棒的vue项目。

1

     兼容性    

1. 对浏览器的兼容

   Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
   

2. 在移动端的兼容

   android 4.2+，ios 7+

   
   

   
   

2

搭建vue项目

Vue.js支持两种使用方式

1. 直接<script>引入

   <script type="text/javascript"></script>

   src 使用 https://unpkg.com/vue 会保持和 npm 发布的最新的版本一致

2. NPM安装

   在使用Vue.js 构建大型应用时推荐使用npm安装方式。NPM能很好的和Webpack或Browserify模块打包器配合使用。

   我在构建自己Vue.js项目时使用的是Vue.js + Webpack。Vue.js 提供了一个官方的命令行工具。可用于快速构建大型单页面应用。改工具提供全家桶，开箱即用的前端开发工具配置。

✦ 第一步：安装nodejs

1、检查本地是否已经安装Node.js。

    打开命令行工具，执行命令： node -v

    若没有显示版本号，或提示 node 不是内部或外部命令，也不是可运行程序或批处理文件。则没有安装。

    如果出现版本号，则已经安装，无须再安装。为了防止后开发环境出现错误，把当前Node.js更新至最新版本。

    执行命令 ：

    #安装node版本管理模块    

    npm install -g n

    #升级npm到最新稳定环境

    n stable

2、本地安装Node.js

从官网 https://nodejs.cn 下载安装。根据操作系统选择相应的版本。以下以Windows操作系统为例。

下载Windows系统 .msi文件 。双击msi文件，按照默认提示一步一步安装。node.js安装会默认安装npm（Node.js的包管理器，是全球最大的开源库生态系统）。

检测node.js 和 npm 是否安装成功，分别在命令行工具输入 node -v 和 npm -v

若显示版本号，证明安装成功。

✦ 第二步：安装vue-cli

    全局安装 vue-cli

    执行命令：

    npm install -g vue-cli

✦ 第三步：初始化项目

1、进入要创建项目的目录，在目录下初始化一个webpack模板的vue.js 项目模板。

    执行命令：

    #进入将要创建项目的目录

    cd E:\workspace

    #创建一个基于webpack为模板的vue项目

    vue init webpack project-name

    从上到下依次是：

        > 指定项目的名字

        > 项目的描述

        > 项目的创建者

        > vue的build选项

            

            build 选项有两种（使用上下键进行切换）：一种是Runtime + Compiler；另一种是Runtime-only。两者的区别就是前者较后者多包含了一个Compiler（编译器）

            编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

            运行时：用来创建 Vue 实例，渲染并处理 virtual DOM 等行为的代码。基本上就是除去编译器的其他一切。

            对于我们编写单文件（*.vue）不需要Compiler，所以我们选择后者，而且这样打出来的生产包更小。

            > 安装vue-router（vue路由）

            > 使用ESLint代码检查工具。代码检查工具是有必要使用的，保证在团队开发时，代码风格保持一致。

            > 使用Karma 和 Mocha创建unit test

            > 使用Nightwatch 创建e2e test

2、安装项目依赖

    vue-cli 是很体贴的，当我们创建完项目模板，她给出了操作提示

    #进入项目目录

    cd project-name

    #安装项目依赖

    npm install

    #启动开发环境服务

    cd npm run dev

    出现下图界面，说明模板初始成功。

3

项目目录说明

项目结构

    我在构建项目时，使用了vuex作为状态管理，集中式存储管理项目的所有组件的状态

    .

    |-- build                            // 项目构建(webpack)相关代码

    |   |-- build.js                     // 生产环境构建代码

    |   |-- check-version.js             // 检查node、npm等版本

    |   |-- dev-client.js                // 热重载相关

    |   |-- dev-server.js                // 构建本地服务器

    |   |-- utils.js                     // 构建工具相关

    |   |-- vue-loader.conf.js   // .vue文件组件转换成纯js模块相关配置

    |   |-- webpack.base.conf.js         // webpack基础配置

    |   |-- webpack.dev.conf.js          // webpack开发环境配置

    |   |-- webpack.prod.conf.js         // webpack生产环境配置

    |   |-- webpack.test.conf.js         // webpack测试配置

    |-- config                           // 项目开发环境配置

    |   |-- dev.env.js                   // 开发环境变量

    |   |-- index.js                     // 项目一些配置变量

    |   |-- prod.env.js                  // 生产环境变量

    |   |-- test.env.js                  // 测试环境变量

    |-- src                              // 源码目录

    |   |-- components                   // vue公共组件

    |   |-- router                       // vue路由

    |   |   |-- index.js 

    |   |-- store                        // vuex的状态管理

    |   |   |-- index.js                 // 我们组装模块并导出 store 的地方

    |   |   |-- action.js                // 根级别的action 

    |   |   |-- mutations.js             // 根级别的mutations 

    |   |   |-- mutation-types.js        // 定义mutation-types 

    |   |   |-- state.js                 // 定义state        

    |   |-- App.vue                   // 页面入口文件

    |   |-- main.js                     // 程序入口文件，加载各种公共组件

    |-- static                           // 静态文件，比如一些图片，json数据等

    |-- .babelrc                         // ES6语法编译配置

    |-- .editorconfig                 // 定义代码格式

    |-- .gitignore                       // git上传需要忽略的文件格式

    |-- README.md                  // 项目说明 

    |-- index.html                     // 入口页面

    |-- package.json                 // 项目基本信息

    .