Vue CLI 脚手架
1.介绍
CLI 命令行界面
Vue CLI 基于Vue.js的快速开发系统
2.环境准备
nodejs安装
环境变量path:安装路径
输入node -v 出现版本安装成功
设置淘宝镜像
npm set registry http://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org
仓库位置
npm config ls
npm config set prefix "your setting path"
配置依赖下载位置
npm config set cache D:\npmreps\npm-cache
npm config set cache D:\npmreps\npm_global
3.npm
包管理工具(node package manager)
初始化
npm init -y -y默认配置
出现package.json
安装jquery
npm i jquery
在新环境中输入,会根据依赖自动下载库
npm i
安装 卸载 更新
nmp i 库名
nmp uninstall 库名
npm ls 查看是否卸载
nmp update 库名
npm list -g 看所有全局安装的模块
npm list grunt 某个模块的版本号
npm -v
npm install npm -g 升级npm
npm install <Module Name>
全局安装与本地安装
npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已，比如
npm install express # 本地安装
npm install express -g # 全局安装
本地安装
-
- 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
-
- 可以通过 require() 来引入本地安装的包。
全局安装
-
- 将安装包放在 /usr/local 下或者你 node 的安装目录。
-
- 可以直接在命令行里使用。
4.安装脚手架
#3.x版本脚手架
npm uninstall -g @vue/cli
#2.x版本脚手架
npm uninstall -g vue-cli
#安装vue cli
npm install -g vue-cli
1.创建vue脚手架项目
vue-cli2
vue init webpack 项目名
npm start 运行项目(根目录)
vue-cli3
vue create 项目名称
npm run serve
2.安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目?
需要安装一个桥接工具才能使用 vue-cli 2.x创建项目
npm install -g @vue/cli-init
创建Vue项目：
vue init webpack 项目名称
5.Vue-cli2项目结构
hello 项目名称
-build 使用webpack打包使用的build依赖
-config 整个项目配置目录
-node_modules 管理项目中使用的依赖
-src Vue源码
assets 用来存放静态资源
components 写Vue组件
router 配置项目的路由
App.vue 项目根组件
main.js 项目主入口
-static 其他静态资源
-.babelrc 将es6转为es5
-.editorconfig 项目编辑配置
-.gitignore
-.postcssrc.js
-index.html 项目主页
-package.json 依赖管理
-package-lock.json 对依赖加锁
-README.md
1.项目开发方式 一切皆组件
2.一个组件中 js代码 html代码 css样式
3.一个组件对应一个一个的业务功能
4.流程：默认main.js-->app.vue-->(把路由注册到对象)-->index.js(由于app中有rout-view) --->检测到路由为根-->helloword.vue
5.main.js 根vue组件,不建议修改
6.改路由在index.js里修改
7.helloword可以当成主页
app.vue
export default {暴露当前组件
name: 'App',
data(){
return{
msg:"6666"
}
},
methods:{},
created() {
}
}
6.新建组件
1.新建一个组件home.vue
2.在index.js里import home from '../components/Home'
3.配置访问路径
4.引用组件
import Footer (组件名) from ' '
在export default 的components注册Footer
在template里<Footer></Footer>
7.安装axios
1、npm 安装axios，文件根目录下安装，指令如下:
npm install axios --save-dev
2、在main.js中引入axios。
import axios from 'axios'
3、接着将axios改写为Vue的原型属性
Vue.prototype.$http=axios
4、全局配置baseURL(后面如果接口baseURL更改了，可直接修改这里就可以了)
Vue.prototype.$http.defaults.baseURL = ``''` `//`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
5.使用
this.$http.get('url').then(res=>{})
6.编译打包
npm run build
8.安装 element-ui
1.安装
npm install element-ui -S
2.在mian.js中引入
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import ElementUI from 'element-ui';(1)
import 'element-ui/lib/theme-chalk/index.css';(2)
Vue.config.productionTip = false
Vue.prototype.$http=axios
Vue.prototype.$http.defaults.baseURL="http://localhost"
Vue.use(ElementUI);(3)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
表格获取当前行ID
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="text" @click="delEvaluate(scope.row.evaluateId)">删除</el-button>
</template>
</el-table-column>
9.使用jquery
在index.html中引入
<script src="static/jquery.min.js"></script>
10.常用配置类
新建utils文件夹放入
request.js用来请求数据，封装的代码如下：
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
在项目根目录下
vue.config.js:
// 跨域配置
module.exports = {
devServer: { //记住，别写错了devServer//设置本地默认端口 选填
port: 9876,
proxy: { //设置代理，必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
target: 'http://localhost:9999', //代理的目标地址
changeOrigin: true, //是否设置同源，输入是的
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}
11.后端返回结果
public class Result<T> {
private String code;
private String msg;
private T data;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
public Result() {
}
public Result(T data) {
this.data = data;
}
public static Result success() {
Result result = new Result<>();
result.setCode("0");
result.setMsg("成功");
return result;
}
public static <T> Result<T> success(T data) {
Result<T> result = new Result<>(data);
result.setCode("0");
result.setMsg("成功");
return result;
}
public static Result error(String code, String msg) {
Result result = new Result();
result.setCode(code);
result.setMsg(msg);
return result;
}
}