vuejs配置和入门学习

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);//错误回调

});