vue入门

• 下载安装node环境

1. 安装网址：https://nodejs.org/en/
2. 检查安装，输出版本号则安装成功

 

1. 为了提高效率，可以使用淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org,输入即可安装npm 镜像 ,以后用到npm的地方就可以用cnpm来代替，

 

• 搭建vue项目环境

1. 全局安装vue-cli

npm install @vue/cli -g    使用vue -V查看版本

 

• 创建项目

Vue-cli创建项目有两种方式命令行方式界面化的方式

1. 命令行方式

a....输入：vue create 项目名称，弹出

 

 

b....选择第三项手动配置（按<space>选择，<a>切换全部，<i>反转选择）

 

 

序号	选项	描述	选择
1	Choose Vue version	选择Vue版本	Y
2	Babel	vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5	Y
3	TypeScript	TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源
4	Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持
5	Router	路由
6	Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
7	CSS Pre-processors	CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。
8	Linter / Formatter	格式化程序	Y
9	Unit Testing	单元测试
10	E2E Testing	端到端（end-to-end）

c....选择vue版本2.x

 

d....选择路由模式（是否使用历史路由模式）

输入Y

 

e.....选择css预处理器，选择less

 

f.....格式化工具

Prettier 第三方的配置 Prettier 主要是做风格统一。代码格式化工具

 

 

g....选择其他lint功能，选择何时进行代码监测

 

Lint on save： 在保存时进行检测

Lint and fix on commit： 在fix和commit时进行检查

h.....您希望在哪里放置Babel，ESLint等的配置？

 

i......将此保存为预设以供将来的项目使用吗？ （是/否）

输入N,回车后开始安装

j......安装完成后进入文件，启动项目

 

k......运行成功，访问项目  

 

 

• 项目目录结构

1. 结构介绍

1. node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
2.  public

1.  favicon.ico // 标签图标
2.  index.html //  主页，打开网页后最先访问的页面

1.  src
   1.  assets // 静态资源img、css
   2.  components //公共组件
   3. views // 页面组件
   4.  App.vue // 根组件
   5.  main.js // 全局脚本文件（项目的入口）
   6. router
      •  index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
2. package.json//配置文件
3. package-lock.json //记录当前状态下实际安装的各个npm package的具体来 源和版本号

1. 文件介绍

1. Index.html ---主页，项目入口

index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。

1. App.vue --- 根组件

Vue中要经常建立后缀名为.vue的文件，.vue的文件通常由三部分构成，分别用<template></template>，<script></script>与<style></style>标签包裹。

我们可以将上述三个部分理解为原来我们学习前端的html，javascript与css三个部分。

其中，<template></template>通常建立我们要用的网页界面，<script></script>通常与数据打交道，定义数据的首发方式等，面向逻辑，而<style></style>主要负责<template></template>标签中的样式。

1. 【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上图，父节点为#app的div，其没有兄弟节点）

<router-view></router-view>是子路由视图，后面的路由页面都显示在此处，打一个比喻吧，<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示

1. 【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

1. 【style】

样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

1. Main.js --- 入口文件

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例

1. router.js --- 路由配置

• ElementUi的使用

官方网址：https://element.eleme.cn/#/zh-CN/component/installation

1. 下载安装

npm install element-ui -S

1. 引入

在main.js中引入element：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

1. 使用（查看官网案例）

• 发送请求

1. 下载安装axios

npm install axios

1. 引入（全局注册）

// 如果没有对请求做处理就引入原来的 import axios from './api/axios'

// 此处引入处理之后的

import axios from './api/axios'  

Vue.prototype.$axios = axios

1. 解决跨域问题

1. 根目录下新建vue.config.js文件

module.exports = {

    devServer: {

        https: false, // 是否启用https

        port: 8080, // 端口

        proxy: { // 处理跨域，本地代理转发

            '/server': {

                target: 'http://192.168.0.110:8998', // 接口域名

                changeOrigin: true, // 是否跨域

                pathRewrite: {

                    '^/server': '' //这里理解成用‘/server’代替target里面的地址

                }

            }

        }

    }

}

1. 新建axios.js文件(src/api/axios.js)用于处理关于请求的公共信息

//处理关于请求的公共信息

import axios from 'axios';

axios.defaults.baseURL = "/server" // server 根目录 vue.config.js 中配置的地址

axios.defaults.withCredentials = true // 跨域允许携带cookie

//请求拦截添加token

axios.interceptors.request.use(

    config => {

        config.headers.token = "eyJhbGciOiJIUzI1NiJ9.eyJMT0dJTl9VU0VSX0tFWSI6ImRlNGQ0ZWY0LTE1YjYtNGU0My1hOTc2LWU3MDkxZGM0NzI1ZCJ9.x1EzpeOM1qVi_f9YiUt6rh0QdHHhg5BXCp95gwme1EQ"

        return config;

    })

export default axios;

1. 请求接口

全局注册的axios,再页面中的使用方法为this.$axios

示例

methods: {

        getInfo() {

            this.$axios.get('/log/getLog')

                .then(res => {

                    this.tableData = res.data.data.list;

                })

                .catch(error => window.console.log(error))

        },

    }

created() {  //实例创建完成后，data、methods 被初始化  生命周期函数

        this.getInfo();

    },