Skip to content

F
Front_end_project-template
Commit 83ed035d by 白狗汪汪汪
Options

新疆项目基础

parent 2f8c7e02
Showing with 387 additions and 56 deletions
build/webpack.base.conf.js
......@@ -89,7 +89,9 @@ module.exports = {
plugins: [
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
_: 'lodash'
_: 'lodash',
// 配置全局函数
$utils: [resolve(`src/utils.ts`), 'default'],
})
]
],
}
config/dev.env.js
......@@ -3,5 +3,7 @@ const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
NODE_ENV: '"development"',
//生产环境 转代理
API_ROOT: '"/api"'
})
config/index.js
......@@ -11,7 +11,7 @@ module.exports = {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
......@@ -31,7 +31,15 @@ module.exports = {
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// 在
proxyTable: {
'/api': {
target: 'http://10.197.236.151:3000/mock/27',
pathRewrite: {
'^/api': ''
}
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
......
config/prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"'
NODE_ENV: '"production"',
API_ROOT: '"http://222.85.150.247:10011/dmsmp"'
}
config/test.env.js
......@@ -3,5 +3,6 @@ const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"'
NODE_ENV: '"testing"',
API_ROOT: '"http://222.85.150.247:10011/dmsmp"'
})
package.json
{
"name": "test2",
"name": "Front_end_project-template",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "白狗汪汪汪 <baifuyou94@163.com>",
......@@ -18,9 +18,12 @@
"dependencies": {
"lodash": "^4.17.4",
"vue": "^2.5.2",
"axios": "^0.18.0",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^6.0.0",
"vue-router": "^3.0.1",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"vuex": "^3.0.1",
"vuex-class": "^0.3.0"
},
......@@ -30,17 +33,23 @@
"babel-eslint": "^8.2.2",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
......@@ -59,7 +68,7 @@
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.17.3",
"cross-env": "^5.0.1",
"inject-loader": "^4.0.1",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
......@@ -69,30 +78,30 @@
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^3.0.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mocha": "^3.2.0",
"chai": "^4.1.2",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"inject-loader": "^4.0.1",
"babel-plugin-istanbul": "^4.1.1",
"phantomjs-prebuilt": "^2.1.14",
"nightwatch": "^0.9.12",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.13",
"rimraf": "^2.6.0",
"nightwatch": "^0.9.12",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-loader": "^4.4.2",
"tslint": "^5.8.0",
"tslint-config-standard": "^7.0.0",
"tslint-loader": "^3.5.3",
"typescript-eslint-parser": "^14.0.0",
"typescript": "^2.9.2",
"typescript-eslint-parser": "^14.0.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^0.5.8",
"vue-loader": "^15.2.4",
......
src/App.vue
......@@ -8,10 +8,12 @@
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
})
export default class App extends Vue {
created(){
}
}
</script>
......
src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1 @click="changemMsg()">{{ msg }}</h1>
<h2>vue-typescrip-starter</h2>
<p>mixin 数据 ：{{ testMixinArg }}</p>
<p>store 数据 ：{{ info.data }}</p>
<p>store 数据 ：{{ info }}</p>
<RC></RC>
<TestVuex></TestVuex>
</div>
</template>
......@@ -12,23 +13,46 @@
import Vue from 'vue'
import Component from 'vue-class-component'
import TestMixin from '../mixins/test-mixin'
import { Getter } from 'vuex-class'
import { State,
Getter,
Action,
Mutation,
namespace } from 'vuex-class'
const test = namespace('test');
// jsx组件
import RC from '@/components/renderComponent.vue'
// 测试组件
import TestVuex from "./test/testVuex.vue"
@Component({
components: {
RC
TestVuex,
RC,
//
},
mixins: [TestMixin]
})
export default class HelloWorld extends Vue<TestMixin> {
@Getter info
msg: string = 'Welcome to Your Vue-Typescript App'
@test.Getter info
msg: string = '信息'
/**
* changemMsg
*/
changemMsg(x:number,y?:number):string{
let res =String(x+y);
return res;
}
mounted () {
console.log('这是 _.assign({})', _.assign({}))
console.log('from mixin', this.testMixinArg)
// console.log('这是 _.assign({})', _.assign({}))
// console.log($utils,'32323')
// console.log('from mixin', this.testMixinArg)
// console.log(this.msg)
// console.log(this.changemMsg(5,3));
}
created(){
// console.log('bvvv')
}
}
</script>
......
src/components/test/test.less 0 → 100644
.hello2{
display: block;
position: relative;
.text{
font-size: 25px;
}
}
\ No newline at end of file
src/components/test/test.ts 0 → 100644
// require("./test.less");
import Vue from 'vue';
import Component from 'vue-class-component';
import { State,
Getter,
Action,
Mutation,
namespace } from 'vuex-class';
const test = namespace('test');
@Component({})
export default class Test extends Vue {
@test.Getter info ;
@test.Action('changeInfos') changeInfos;
user_Info:string='';
changeInfo() {
if(this.user_Info===''){
this.$message('请输入新的值哇哈哈哈');
return;
}
this.changeInfos(this.user_Info)
}
mounted () {
let data = {
userCode:'root',
userPwd:'25d55ad283aa400af464c76d713c07ad'
}
$utils.$getData("/login",data,(res)=>{
})
}
}
src/components/test/testVuex.vue 0 → 100644
<template>
<div class="hello2">
<p>测试vuex状态管理的组件</p>
<input type="text" v-model="user_Info">
<el-button @click="changeInfo">按钮</el-button>
<span class="text" v-text="`这是子组件内引入的状态：${info}`"></span>
</div>
</template>
<script lang="ts" src="./test.ts"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("./test.less");
</style>
src/http.ts 0 → 100644
/**
* 统一配置axios
* 使用qs.stringify解决axios跨域问题
* 配置axios请求类型为post时，使用qs.stringify来实现跨域访问，以及每次请求携带token
* 配置请求成功后res，实现诸如登录失败，登录超时，账户密码错误和请求错误等拦截器
*/
import Vue from 'vue'
import axios from 'axios'
// axios 配置
axios.defaults.timeout = 1000*60*2; //请求超时设置
// 引入配置的接口
const apiUrl = process.env.API_ROOT;
axios.defaults.baseURL = apiUrl;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
// axios.defaults.withCredentials=true;
// http request 拦截器
axios.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = JSON.stringify(config.data);
} else if (config.method === 'get') {
}
return config;
},
err => {
return Promise.reject(err);
});
// http response 拦截器
/**
* 拦截器也可以判定返回的response成功时的状态码进行拦截
*/
axios.interceptors.response.use(
res => {
return Promise.resolve(res);
},
err => {
if (err.response!=undefined) {
// console.log(err.response.status)
switch (err.response.status) {
case 400: err.message = '请求错误(400)'; break;
case 401: err.message = '未授权，请重新登录(401)'; break;
case 403: err.message = '拒绝访问(403)'; break;
case 404: err.message = '请求出错(404)'; break;
case 408: err.message = '请求超时(408)'; break;
case 500: err.message = '服务器错误(500)'; break;
case 501: err.message = '服务未实现(501)'; break;
case 502: err.message = '网络错误(502)'; break;
case 503: err.message = '服务不可用(503)'; break;
case 504: err.message = '网络超时(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `连接出错(${err.response.status})!`;
}
} else {
err = {
message: '连接服务器失败!',
response:{
status: -100
}
};
}
return Promise.reject(err);
});
export default axios;
src/main.ts
// 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 Vue from 'vue'
import App from './App'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/mixins/test-mixin.ts
......@@ -14,4 +14,5 @@ export default class TestMixin extends Vue {
testMixinFunc (): void {
console.log('this string is from test mixin console.log')
}
}
src/sfc.d.ts 0 → 100644
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
declare module "*.less" {
const content: any;
export default content;
}
src/store/index.ts
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
// 测试模块
import test from "./modules/test"
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
test
}
})
......
src/store/modules/test/actions.ts 0 → 100644
import { Commit } from 'vuex';
const actions: any = {
changeInfos(context: { commit: Commit }, params: string){
context.commit('changeInfo',params)
}
}
export default actions;
\ No newline at end of file
src/store/modules/test/gettters.ts 0 → 100644
const getters = {
info: state => state.info
}
export default getters;
\ No newline at end of file
src/store/modules/test/index.ts 0 → 100644
// 测试模块。
import { Commit } from 'vuex';
import getters from "./gettters";
import actions from "./actions";
import mutations from "./mutations";
let state: any = {
info: '测试模块的数据',
}
export default {
namespaced:true,
state,
mutations,
actions,
getters
}
src/store/modules/test/mutations.ts 0 → 100644
const mutations: any = {
changeInfo(state: any,infos: string){
state.info=infos+'fsdfs';
}
}
export default mutations;
\ No newline at end of file
src/store/modules/user.ts deleted 100644 → 0
let state = {
info: {
data: 'store data from user'
},
auth: {}
}
const mutations = {}
const getters = {
info: state => state.info
}
export default {
state,
mutations,
actions: {},
getters
}
src/utils.ts 0 → 100644
// 工具类函数集合
import axios from "./http";
const utils={
//去掉字符串头尾空格
$trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
},
// 验证手机号
$CheckPhone(value):boolean{
const reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
if (!reg.test(value)) {
return false;
} else {
return true;
}
},
//匹配电话号码（座机）
$CheckTel(value):boolean{
const reg =/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
if (!reg.test(value)) {
return false;
} else {
return true;
}
},
// 验证身份证号
$CheckIDcard(value){
const reg =/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (!reg.test(value)) {
return false;
} else {
return true;
}
},
/**
* [时间戳处理]
* @Author 白富友
* attr =[{val:1,txt:'bb'}];
* @DateTime 2018-12-4
*/
$time(time,type=1){ //13位
let res = '';
if(time==''){
return res;
}
const date = new Date(time);
const year = date.getFullYear();
const mon = this.$bigTen(date.getMonth()+1);
const day = this.$bigTen(date.getDate());
const hour = this.$bigTen(date.getHours());
const min = this.$bigTen(date.getMinutes());
const sec = this.$bigTen(date.getSeconds());
switch(type){
case 1:
res = mon+'/'+day+" "+hour+":"+min;
break;
case 2:
res =year+'-'+mon+'-'+day+" "+hour+":"+min+':'+sec;
break;
case 3:
res =year+'-'+mon+'-'+day+" "+hour+":"+min;
break;
case 4:
res =year+'-'+mon+'-'+day;
break;
}
return res;
},
// 将16进制转化为rgb
$colorRgb(color,type='string'){
    let sColor= color.toLowerCase();
const reg= /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    if(sColor&& reg.test(sColor)){
        if(sColor.length=== 4){
            let sColorNew= "#";
            for(let i=1;i<4; i+=1){
                sColorNew+= sColor.slice(i,i+1).concat(sColor.slice(i,i+1));  
            }
            sColor= sColorNew;
        }
        //处理六位的颜色值
        let sColorChange= [];
        for(let i=1;i<7; i+=2){
            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2))); 
        }
let res = null;
if(type=='string'){
res = "RGB(" +sColorChange.join(",")+ ")";
}else if(type=='attr'){
res = sColorChange;
}
        return res;
    }else{
        return sColor; 
    }
} ,
// 请求
$getData(url:string, data:object, callback:any) {
axios({
method:'post',
url:url,
data:data,
headers:{
'token':sessionStorage.getItem('token'),
},
}).then((res) => {
callback(res);
}).catch((err)=>{
callback(err);
})
}
}
export default utils;
\ No newline at end of file
src/vue-shim.d.ts → src/vue-shims.d.ts
import * as lodash from 'lodash'
import Vue from 'vue'
declare module '*.vue' {
export default Vue
}
// 全局变量设置
declare global {
const _: typeof lodash
const $utils
}
// iview 全局方法
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment