Vue的简单使用

更多内容可以访问我的个人博客。

由于项目需要，了解了一下Vue. 但由于对前端并不熟悉，所以本文只介绍Vue的简单使用，使用Vue开发的步骤等。

《Vue官方文档》

《Vue CLI官方文档》

vue-cli的webpack模板项目配置文件说明

1. Node.js

Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。Node.js采用Google开发的V8运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。

Node.js大部分基本模块都用JavaScript语言编写。在Node.js出现之前，JavaScript通常作为客户端程序设计语言使用，以JavaScript写出的程序常在用户的浏览器上运行。Node.js的出现使JavaScript也能用于服务端编程。Node.js含有一系列内置模块，使得程序可以脱离Apache HTTP Server或IIS，作为独立服务器运行。

使用Vue之前要先安装Node.js

在Node.js官网下载安装即可

安装完成之后可以在命令行执行

node -v

查看安装的Node.js版本

在命令行使用node命令会进入node交互模式

2. Vue安装

使用npm进行安装

npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

① 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

② 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

③ 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入**“npm -v”**来测试是否成功安装。出现版本提示表示安装成功。

由于npm下载服务器架设在国外，可能出现下载网速非常慢的情况，

所以可以选择安装cnpm命令，使用cnpm命令来下载淘宝的npm镜像,安装命令为：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，使用cnpm代替npm命令即可

使用npm安装Vue命令如下：

npm install vue

3. Vue CLI

目前最新的版本是3.x. 在命令行中由vue-cli改为了@vue/cli

Vue CLI是一个基于 Vue.js 进行快速开发的完整系统，其主要功能是：

通过@vue/cli搭建交互式的项目脚手架。

通过@vue/cli+@vue/cli-service-global快速开始零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；

基于 webpack 构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

其他的功能可以先不去管，这里使用只需要知道vue-cli可以基于webpack等模板构建出一个项目脚手架，同时可以很方便地加入各种插件。

首先全局安装vue-cli。

npm install --global vue-cli

然后就可以使用vue-cli新建一个项目，这里创建一个基于webpack模板的新项目。

vue init webpack vue-test

之后有提问创建信息，vue router是用来设置页面跳转路由的，一般是需要的；ESLint是规范代码的插件，test是单元测试的插件，在这里可要可不要。

之后给出了三个命令，依次执行三个命令就可以启动项目。

之后输入

npm run dev

就可以启动服务，打开localhost:8080即可看到页面。

4. 其他插件

若要安装其他插件，比如element-UI、Axios、Echarts等。可以直接进入需要安装插件的官网，一般官网都有安装教程。

一般通过npm安装，如：

Element：

Echarts：

5. 项目结构

可以使用微软的Visual Studio Code打开项目目录。

build文件夹：存放一些构建及配置信息；

config文件夹：存放一些配置信息；

**node_modules文件夹：**类似Java的lib，存放的是插件的源代码，如果需要改变插件，直接点开对应源代码修改即可；

src文件夹：存放项目代码，包含三个文件夹；

assets：存放资源文件

**components：**存放编写的页面组件（Vue文件）

**router：**包含一个index.js，可以设置路由信息（页面跳转）

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

static：存放静态文件；

package.json：存放一些插件依赖信息；

6. vue文件结构

一个典型的vue文件有如下3部分结构组成。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

< template/> 标识中存放html代码，设计页面结构。

< script/> 标识中存放js代码，用到的一些方法和数据。

< style/> 标识中存放CSS，设置样式。