1.引入vue.js
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.chrome Vue devtools
安装插件后要在
C:\Users\yx\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\4.1.3_0\manifest.json中修改
"background": { "persistent": true,
F12找vue
3.官方文档
https://cn.vuejs.org/v2/guide/syntax.html
4.记录特性
{{}} 文本插值
v-once 单次插值不更新
v-html 不解析html
v-bind html属性相应更新
v-bind:id可以直接简写为:id
<div v-bind:id="dynamicId"></div>
v-if 根据v-if的值来插入/移除 <T>
元素,还可以用模板方式来管理整块显隐
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
4.1 学习文档排坑记录
a.div的id和vue的object不要同名(app),不然控制台命令会混
b.可以用下面的写法,等同于对象,但是注意return不能单放一行
data: function() { //return必须和后面的大括号写一行
return {visible : false ,
seen : true ,
}
c.
5.脚手架快速搭建及element ui
5.1 全局安装vue/cli 3.0:
npm install -g @vue/cli
5.2 cd 进入上级目录来创建项目文件夹和明细
vue create my-project
5.3 安装以后按提示运行调试
cd my-project
//npm i element-ui axios vue-router vuex jquery fullcalendar --registry=https://registry.npm.taobao.org
npm run serve
5.4 浏览http://localhost:8080/
5.5 再开一个cmd,安装element-ui包
npm i element-ui -S
5.5 结构解析
修改main.js来确定引用
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
render: h => h(App)
}).$mount('#app')
app.vue确定引用哪些组件和使用组件布局。(必要三项:import,加入compontents,模板中添加<>)
自建.vue文件,填充单个组件内容。注意除了import, <script>export default { //全部脚本代码 ... }在最外层。
5.6 修改服务器运行的默认端口
在新建项目目录中找到serve.js
my-project\node_modules\@vue\cli-service\lib\commands\serve.js
修改port: 8080为所需端口8095
const defaults = {
host: '0.0.0.0',
port: 8080,
https: false
}
5.7使用esri-loader引入arcgis api
npm install --save esri-loader
然后新建vue文件script添加:
import esriLoader from 'esri-loader';
export default {
methods: {
createMap:function(){
const options = {
url: 'http://123.206.xxx.xxx/arcgis_js_api/library/4.7/dojo/dojo.js'
};
esriLoader.loadModules([
'esri/views/MapView', 'esri/WebMap',"esri/config",
],options).then(([
MapView, WebMap,esriConfig
]) => {
//加入跨域
esriConfig.request.corsEnabledServers.push('123.206.xxx.xxx');
var map
var view
})
},
},
mounted(){
this.createMap();
}
}
打包build时资源的href会自动识别为/的绝对路径,可以手动改为./来改相对路径, 或者更改webpack config:
项目根目录新建vue.config.js,写入内容
module.exports = {
configureWebpack: {
output: {
publicPath: './'
}
}
}
可以在命令提示符下输入 ./node_modules/.bin/vue-cli-service inspect
检查webpack的设置状态
5.8 npm安装全局模块方式安装后项目调用方法(以mongoose为例):
npm install -g mongoose
但是执行require(‘mongoose’)之后仍然提示未找到,那么可以在命令行切换到当前项目所在目录,然后执行下面命令:
npm link mongoose
就会在node_modules文件夹里增加全局模块的快捷方式或者说连接,此时就可以正常使用了。
5.9 vuecli中引入jq和基于jq的第三方库(fullcalendar)
安装包:npm i jquery fullcalendar
main.js中加入
import $ from 'jquery'
window.$ = window.jQuery = $
require('fullcalendar')
组件或者main中加入:
import 'fullcalendar/dist/fullcalendar.css';
import moment from 'moment';
import 'fullcalendar/dist/locale/zh-cn.js';
使用时还是这样一套:
<div id="calendar"></div>
mounted() {
var initialLangCode = 'zh-cn';
$('#calendar').fullCalendar({
///...初始化
});
6 axios相关的坑
6.1 引入main.js
import axios from 'axios'
Vue.prototype.$axios=axios;
6.2 加入跨域和token头,允许前端接收cookie
this.$axios.interceptors.request.use(
config => {
config.headers.Authorization = `Bearer eyJhbxxxxxxxxxxxxxxIIrbhQ`; //token
config.headers = {"Content-Type": "application/x-www-form-urlencoded"}; //跨域
return config;
},err => {
return Promise.reject(err); });
this.$axios.defaults.withCredentials =true;//允许带cookie
6.3 post请求
this.$axios
.post("http://localhost:58733/data.ashx", dataobject)
.then(function(response) {
console.log(response);//回调
})
.catch(function(error) {
console.log(error);//错误回调
});