一.新建vue项目

参考我的文章

Vue项目安装到发布流程图

image.png

vue npm 搭建项目 流程及备忘及不踩坑

image.png

正式开始

image.png

1.1初始化项目

vue init webpack vue_element-ui_neditor

选"n"

Use ESLint to lint your code? (Y/n)

选"n"

Set up unit tests No ?(Y/n) 

选"n"

Setup e2e tests with Nightwatch?(Y/n) 

选"n"

初始化项目完成.

1.2运行项目

npm run dev

在浏览器查看localhost:8080

image.png

二.安装 axios

2.1尝试请求豆瓣数据

参考我的文章

vue项目中安装和使用axios,(用豆瓣接口示例)

image.png

vue项目中安装和使用axios参考链接

image.png

正式开始

本文参考(转载)https://www.jianshu.com/p/2045900d49df

先贴上请求地址

比如这里我要请求https://api.douban.com/v2/movie/top250的数据

(豆瓣接口以后如果不行,备用http://t.yushu.im/v2/movie/top250)
截图

image.png

正式开始

(1).安装axios

代码

npm install --save axios vue-axios

(2).在main.js引入axios

代码

import axios from 'axios' //引入axios
Vue.prototype.$axios = axios; //添加axios到Vue的原型对象上

!!(注意,不要在main.js里写Vue.use(axios),因为axios不是vue的插件,只要插件才这样写,比如Vue.use(ElementUI);)

截图

image.png

(3).利用proxyTable配置代理跨域

在config的index.js里的proxyTable里添加代理,例如
代码

proxyTable: {//在这里面配置代理跨域
      '/api': {  
        target: 'https://api.douban.com',  
        changeOrigin: true,  
        pathRewrite: {  
            '^/api': '/'  
            //写'/api'就等于写'https://api.douban.com'
            //写"/api/v2/movie/top250"就等于写"https://api.douban.com/v2/movie/top250"
        }  
      } 
   }

截图

image.png

(4).在页面中使用axios请求数据

this.$axios.get(api).then((response) => {
  console.log(response.data)
})

截图

image.png

请求成功效果图

image.png

2.2请求cg的接口

三.安装element-ui

3.1在vue项目里安装和引入 element-ui

CMD安装element-ui

npm i element-ui -S

image.png

3.2第二步骤：在main.js中引入js和css

import ElementUI from 'element-ui';

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

image.png

3.3第三步骤：让vue引用Element ui

Vue.use(ElementUI);

image.png

然后，我们就可以使用Element ：那么我们引用一部分样式看看：

image.png

表示成功

3.4在页面里使用Cascader 级联选择器

http://element-cn.eleme.io/#/zh-CN/component/cascader

image.png

和caigui的后台数据对接上

四.建立富文本编辑器neditor组件.在需要的页面中使用组件.