vue例子

cnpm install -g vue-cli
sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/vue /usr/local/bin/vue
https://blog.csdn.net/weixin_43945983/article/details/88294052 安装jquery 插件
cnpm install axios -g
https://www.cnblogs.com/chaoyuehedy/p/9931146.html
表格组件:https://element.eleme.cn/2.9/#/zh-CN/component/table
表格组件 cnpm i element-ui -S
https://element.eleme.cn/#/zh-CN/component/installation

路由参考
https://segmentfault.com/q/1010000007809224
https://blog.csdn.net/u011295864/article/details/86488985
https://www.cnblogs.com/gshao/p/9415624.html

build/utils.js

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
	publicPath: "../../"
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

build/webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "first project test",
  "author": "leiyang.lly",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.19.1",
    "element-ui": "^2.13.0",
    "jquery": "^3.4.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<!--	<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
<center>
	<div id="app">
	</div>
</center>

</body>
</html>

App.vue

<template>
<el-container style="height: 100%; border: 1px solid #eee">
  <el-header>
    <appHeader></appHeader>
  </el-header>
  <el-container style="height: 100%">
    <el-aside style="height: 100%;width:200px">
      <asideLeft></asideLeft>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
  <appFooter></appFooter>
</el-container>
</template>

<script>
import Header from './components/header.vue'
import Aside_left from './components/aside_left.vue'
import Footer from './components/footer.vue'

export default {
  name: 'App',
  components: {
    'appHeader': Header,
    'appFooter': Footer,
    'asideLeft': Aside_left
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}

.el-header {
  color: #333;
  line-height: 60px;
  text-align: right;
  font-size: 12px;
  background-color: #374249;
}

.el-aside .el-submenu__title{
  background-color: #425967;
  color: #ffffff;
}
.el-menu-item-group .el-menu-item-group__title{
  background-color: #678496;
  color: #ffffff;
}
.el-menu-item{
  background-color: #678496;
  color: #ffffff;
}

</style>

main.js

import Vue from 'vue'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/icon.css';


import App from './App'
import router from './router'
import request from './request/api'

Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.$ajax = axios
Vue.prototype.$request = request
Vue.config.debug = true
Vue.config.devtools = true
Vue.config.productionTip = true


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
	App
  },
  template: '<App/>'
})

MyTable3.vue

<template>
<el-container style="height: 90%;">
<el-main>
  <div>
     <el-dialog title="配置广告物料" :visible.sync="dialogFormVisible">
	<el-form ref="form" :model="formData" label-width="80px" style="width:400px">
	  <el-form-item label="创建者">
	    <el-input v-model="formData.username"></el-input>
	  </el-form-item>
	  <el-form-item label="创意id">
	    <el-input v-model="formData.creativeid" readonly="true"></el-input>
	  </el-form-item>
	  <el-form-item label="创意样式id">
	    <el-input v-model="formData.creativetype"></el-input>
	  </el-form-item>
	  <el-form-item label="创意描述">
	    <el-input v-model="formData.name"></el-input>
	  </el-form-item>
	  <el-form-item label="操作系统">
	    <el-radio-group v-model="formData.os">
	      <el-radio label="Android" value="1"></el-radio>
	      <el-radio label="Ios" value="0"></el-radio>
	    </el-radio-group>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" :plain="true" @click="dialogFormVisible=false;handleSave()">确认</el-button>
	    <el-button :plain="true" @click="dialogFormVisible=false;handleCancel()">取消</el-button>
	  </el-form-item>
	</el-form>
     </el-dialog>
  </div>
  </table>
	<el-table :data="valueList" style="width: 95%">
		<el-table-column label="ID" width="180">
			<template slot-scope="scope">
				<!--span style="margin-left: 10px">{{ scope.$index+1 }}</span-->
				<span style="margin-left: 10px">{{ scope.row.id }}</span>
			</template>
		</el-table-column>
		<el-table-column label="创意id" width="180">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.creativeid }}</span>
			</template>
		</el-table-column>
		<el-table-column label="创意样式id" width="180">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.creativetype }}</span>
			</template>
		</el-table-column>
		<el-table-column label="创意描述" width="180">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.name }}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作系统" width="180">
			<template slot-scope="scope">
				<span style="margin-left: 10px">{{ scope.row.os }}</span>
			</template>
		</el-table-column>
		<el-table-column label="创建者" width="180">
			<template slot-scope="scope">
				<el-popover trigger="hover" placement="top">
					<p>姓名: {{ scope.row.username }}</p>
					<div slot="reference" class="name-wrapper">
            					<el-tag size="medium">{{ scope.row.username }}</el-tag>
          				</div>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
			<el-button-group>
				<el-button size="mini" icon="el-icon-edit" @click="dialogFormVisible=true;handleEdit(scope.$index,scope.row)">编辑</el-button>
				<el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
			</el-button-group>
			</template>
		</el-table-column>
	</el-table>
</el-main>
</el-container>
</template>


<script>
export default {
  data() {
     return {
	inputItem:[
		{
			text: "创意id",value:""
		},
		{
			text: "创意样式id",value:""
		},
		{
			text: "创意描述",value:""
		},
		{
			text: "操作系统",value:""
		},
		{
			text: "创建者",value:""
		}
	],
        valueList:[],
	tableData: [],
	formData:{
                id:-1,
                username:'',
                creativeid:'',
                creativetype:'',
                name:'',
                os:''
	},
	dialogFormVisible: false
     }
   },
    beforeCreate(){
    },
    created(){
	this.loadInfo();
   },
    beforeMount(){
    },
    mounted(){
    },
    beforeUpdate(){
    },
    updated(){
    },
   methods:{
      	insert:function() {
	  	var newitem = {
			'username':this.inputItem[0].value,
			'creativeid':this.inputItem[1].value,
			'creativetype':this.inputItem[2].value,
			'name':this.inputItem[3].value,
			'os':this.inputItem[4].value
	  	}
          	this.valueList.push(newitem);
      	},
      	remove:function(creativeid){
	  	var index = this.valueList.findIndex(item => {
			if(item.creativeid == creativeid) {
				return true;
			}
	  	});
          	this.valueList.splice(index,1);//通过索引删除数据
      	},
	loadInfo:function (){
		var url = 'http://huichuan.qa.alibaba-inc.com/debug/getUserTargetConfigInfo'
		this.$request.get(url).then(res =>{
			console.log(res);
			this.valueList = [];
			for (var i = 0 ; i < res["data"]["data"].length ; i ++)
			{
			  var item = res["data"]["data"][i];
			  var newitem = {
				'id':item[0],
				'username':item[1],
				'creativeid':item[2],
				'creativetype':item[3],
				'os':item[4],
				'name':item[5]
			  }
			  if(newitem.os == 0){
				newitem.os = "Ios";
			  }
			  else{
				newitem.os = "Android";
			  }
			  this.valueList.push(newitem);
			}
		})
	},
	handleEdit:function(index, row) {
        	console.log(index, row);
		this.formData = row;
      	},
      	handleDelete:function(index, row) {
		this.$confirm('确认删除该数据?', '提示', {
          		confirmButtonText: '确定',
          		cancelButtonText: '取消',
          		type: 'warning'
        	}).then(() => {
			var index = this.valueList.findIndex(item => {
				if(item.creativeid == row.creativeid) {
					return true;
				}
			});
			this.valueList.splice(index,1);
			//todo  数据库中删除
          		this.$message({
            			type: 'success',
            			message: '删除成功!'
          		});
       	 	}).catch(() => {
          		this.$message({
            			type: 'info',
            			message: '已取消删除'
          		});
        	});
      	},
	handleAdd:function() {
		handleClear();
	},
	handleSave:function() {
		var os = 0;
		if(this.formData.os == "Android")
		{
			os = "1";
		}
	        var index = this.valueList.findIndex(item => {
			if(item.creativeid == this.formData.creativeid) {
				return true;
			}
	  	});
	        this.valueList[index] = {
			id:this.formData.id,
			username:this.formData.username,
			creativeid:this.formData.creativeid,
			creativetype:this.formData.creativetype,
			name:this.formData.name,
			os:os
	  	}
		//保存成功或者失败来进行提示内容的改变
		var ret = true;
		if (ret == true){
			this.$message({
				message: '保存成功!',
				type: 'success'
			});
		}
		else{
			this.$message({
				message: '保存失败!',
				type: 'error'
			});
		}
		handleClear();
      	},
	handleCancel:function() {
		this.$message({
			message: '取消修改!',
			type: 'warning'
		});
		handleClear();
	},
	handleClear:function() {
		formData.id = -1;
		formData.username = '';
                formData.creativeid='';
                formData.creativetype='';
                formData.name='';
                formData.os='';
	}
   }
}
</script>

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyTable from '@/components/MyTable'
import MyTable2 from '@/components/MyTable2'
import MyTable3 from '@/components/MyTable3'
import test from '@/components/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    },
    {
      path: '/table2',
      name: 'MyTable2',
      component: MyTable2
    },
    {
      path: '/debug/manage.html',
      name: 'MyTable3',
      component: MyTable3
    },
    {
      path: '/test',
      name: 'test',
      component: test
    }
  ]
})

request/api.js

import axios from 'axios'

export default {
  get: function (productId) {
    return axios.get(`${productId}`)
  }
}

components/aside_left.vue

<template>
<el-menu :default-openeds="['1']">
	<el-submenu index="1">
		<template slot="title"><i class="el-icon-user"></i>联调管理</template>
		<el-menu-item-group>
			<template slot="title"></template>
			<el-menu-item index="1-1">联调定向列表</el-menu-item>
			<el-menu-item index="1-2">广告仓库列表</el-menu-item>
		</el-menu-item-group>
	</el-submenu>
	<el-submenu index="2">
		<template slot="title"><i class="el-icon-setting"></i>接入管理</template>
	</el-submenu>
	<el-submenu index="3">
		<template slot="title"><i class="el-icon-question"></i>帮助说明</template>
		<el-menu-item-group>
			<el-menu-item index="3-1">平台使用文档</el-menu-item>
			<el-menu-item index="3-2">广告对接文档</el-menu-item>
		</el-menu-item-group>
	</el-submenu>
	<el-submenu index="4">
		<template slot="title"><i class="el-icon-pie-chart"></i>数据报告</template>
	</el-submenu>
</el-menu>
</template>

components/header.vue

<template>
<span class="logo">xxxxxx平台</span>
<el-dropdown>
	<i class="el-icon-setting" style="margin-right: 15px"></i>
	<el-dropdown-menu slot="dropdown">
		<el-dropdown-item>查看</el-dropdown-item>
		<el-dropdown-item>新增</el-dropdown-item>
	</el-dropdown-menu>
</el-dropdown>
<span>lll</span>
</template>
发布了2 篇原创文章 · 获赞 0 · 访问量 25
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览