项目搭建：
1、前端使用基于vue-cli框架实现页面展示
2、中间件webservice使用C#实现前端与后台数据库的连接
3、使用存储过程将所有业务放到这里啦，
项目实操
一、环境配置
1、全局安装vue-cli ,以后一直用
npm install -g @vue/cli
2、创建过程
查看vue版本 vue -V
创建工程 vue init webpack hxc_person
进入工程目录
初始化安装包 npm install
安装 npm install webpack@3.6.0 -s 不知道为什么初始化完没有这个了
弄错了，一不小心弄了两套ui，还好是自己用，
安装mint-ui npm install mint-ui -S
主要用这个 安装element-ui npm install element-ui -S
安装axios npm install -s axios
因为要用到jquery组件,所以引入JQuery
npm install -s jquery@2.1.1
配置
webpack.base.conf.js文件
............. // 配合引入jquery const webpack = require('webpack'); ............. //其他代码 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), // webpack 使用 jQuery，如果是自行下载的 // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'), // 如果使用NPM安装的jQuery 'jquery': 'jquery' } }, // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], //其他代码 ............. 注意：修改配置文件后，要重新npm run dev
详细引入说明
http://618cj.com/2016/08/24/vue-cli%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5jquery/
问题1 引入jquery的js组件，遇到第一个坑，引入jquery写的滑动组件，结果组件里设置背景图片不显示，也不报错，弄了好几个小时，想了笨办法解决了。因为在引入的js里设置无效，所以只能在mounted方法里重新设置一遍。
mounted: function() { this.$nextTick(function(ischeck) { var res = hd(); const bgimg = document.getElementById("mpanel4"); // console.log(bgimg.getElementsByTagName("div")); // console.log(bgimg.getElementsByTagName("div")[1].style.backgroundImage); // var imgsrc = bgimg.getElementsByTagName("div")[1].style.backgroundImage; // // imgsrc = imgsrc.replace('url("', ""); // // imgsrc = imgsrc.replace('")', ""); // // console.log(imgsrc); //拼接img路径报错，不能解析 if (Math.ceil(Math.random() * 10) < 5) { bgimg.getElementsByTagName("div")[1].style.backgroundImage = "url(" + require("@/assets/verify/images/1.jpg") + ")"; //设置大图 bgimg.getElementsByTagName("div")[7].style.backgroundImage = "url(" + require("@/assets/verify/images/1.jpg") + ")"; //设置大图 } else { bgimg.getElementsByTagName("div")[1].style.backgroundImage = "url(" + require("@/assets/verify/images/2.jpg") + ")"; //设置大图 bgimg.getElementsByTagName("div")[7].style.backgroundImage = "url(" + require("@/assets/verify/images/2.jpg") + ")"; //设置大图 } }); // 这里只是操作dom // console.log('验证结果='+res); // console.log(this.ischeck.isok); // this.$set(this.ischeck, 'isok', '1') }
问题2 遇到的第二个坑，用了一下午才搞定。因为不会在动态添加的dom上绑定事件，所以最后只能用js模拟绑定事件进行触发。
function clickMe(tv){ var o=document.getElementById("mycheck"); o.focus(); o.value=tv;//自动赋值以后文本框已经change，理论上要发生onchange事件 //但是如果不加以下这句是不会触发onchange事件的 if ("createEvent" in document) { var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); o.dispatchEvent(evt); } else { o.fireEvent("onchange"); }} 这样就可以触发这个事件了。
vuex 使用
安装 npm install vuex --save
官方教程 https://vuex.vuejs.org/zh/guide/
问题3，在一个组件里引入另一个组件
推荐异步引入格式
//一般引入import mystory from "@/utils/localstore.js";//异步引入const mystory=()=> import ("@/utils/localstore.js");
问题4，同时要对好几张表的数据进行保存、修改操作
问题5，当部署到iis后，指定IP可以访问，但是当 192.168.3.95:8888/home 形式访问时404.只需要按下面操作即可解决。
HTML5 History 模式
原因：直接访问url会被http server直接解析到该文件路径，但是spa的路由是虚拟的，并不能直接找到这个file，所以会404；
需要把所有的请求全部指向（不知道这么说是不是准确）index，然后让js的router解析url， nginx 需要配置 try_files $url /index.htmlhttps://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
问题6 打包报文件较大
常用处理方式
1、在路由js里采用异步加载
2、在配置文件里index.js里采用压缩打包
// Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, productionGzipExtensions: ['js', 'css'],
问题7 新开一个窗口
一. <router-link>标签实现新窗口打开：
官方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签，但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，示例如下：
热门好货
注：只有tag="a"模式下 target="_blank" 属性才会生效。
二. 编程式导航：
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 $router.go ,但是vue2.0以后，这种方式就不支持新窗口打开的属性了。这两种平常用的都比较多，这里就不再赘述。百度了下，找到了使用 $router.resolve 这种方法能够实现新窗口打开，示例代码如下：
配置路由
{ path: '/xiangqing', name: 'xiangqing', component: xiangqing }, 跳转设置
getdataexp:function(tempobj){ console.log('查询企业id='+tempobj.cid); let routeData = this.$router.resolve({ path: "/xiangqing", query: {cid:tempobj.cid,cname:tempobj.name} }); window.open(routeData.href, '_blank'); }, 这样就可以在vue的模式下打开新窗口了
建立项目步骤：
1、如果已经安装则忽略 npm install -g @vue/cli
2、建立项目 vue init webpack 项目名称
3、初始化
npm install
npm install webpack@3.6.0 -s
npm install jquery -s
npm install element-ui -s
4、配置
webpack.baes.conf.js文件添加
// 配合引入jquery const webpack = require("webpack"); resolve: { extensions: [".js", ".vue", ".json"], alias: { vue$: "vue/dist/vue.esm.js", "@": resolve("src"), jquery: "jquery", // 'verify': resolve('src/assets/verify'), //自定义插件 assets: resolve("src/assets") } }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], main.js文件注册相关引入
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import "element-ui/lib/theme-chalk/index.css";import Vue from "vue";import App from "./App";import router from "./router";import ElementUI from "element-ui";// 引入jqueryimport $ from "jquery";// import 'verify/css/verify.css'// import 'verify/js/verify.js'// 动画库// import animated from 'animate.css' // npm install animate.css --save安装，在引入// Vue.use(animated)// 直接在需要的位置进行引入 import @'../../node_modules/animate.css/animate.css'// 配置axios// import Axios from 'axios'import myhttp from "@/utils/http.js";Vue.prototype.$post = myhttp.post;Vue.prototype.$get = myhttp.get;Vue.prototype.$postfile = myhttp.postfile;// 註冊 饿了么 UIVue.use(ElementUI);Vue.config.productionTip = false;/* eslint-disable no-new */new Vue({ el: "#app", router, components: { App }, template: "