Repository: Jinkeycode/vue2-example
Branch: master
Commit: 8eef7e4343a9
Files: 10
Total size: 5.4 KB
Directory structure:
gitextract_s279jzeo/
├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── src/
│ ├── App.vue
│ ├── component/
│ │ ├── firstcomponent.vue
│ │ └── secondcomponent.vue
│ └── main.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
presets: ['es2015', 'stage-0']
}
================================================
FILE: .gitignore
================================================
#log
*.log
#npm
node_modules
#build
dist
================================================
FILE: README.md
================================================
# vue2
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
================================================
FILE: package.json
================================================
{
"name": "vue2",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --open --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"element-ui": "^1.0.0-rc.5",
"vue": "^2.0.1",
"vue-resource": "^1.0.3",
"vue-router": "^2.0.0",
"webpack-dev-server": "^2.9.3"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"vue-loader": "^9.5.1",
"webpack": "^2.7.0"
}
}
================================================
FILE: src/App.vue
================================================
<template>
<div id="app2">
<img src="./assets/logo.png">
<h1>Hello App!</h1>
<firstcomponent></firstcomponent>
<ul>
<li><router-link to="/first">点我跳转到第一页</router-link></li>
<li><router-link to="/second">点我跳转到第二页</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
</template>
<script>
import firstcomponent from './component/firstcomponent.vue'
export default {
data () {
return {
msg: 'Hello Vue!'
}
},
components: { firstcomponent }
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
================================================
FILE: src/component/firstcomponent.vue
================================================
<template>
<div id="firstcomponent">
<h1>I am a component.</h1>
<a> written by {{ author }} </a>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
author: "Jinkey"
}
}
}
</script>
<style>
</style>
================================================
FILE: src/component/secondcomponent.vue
================================================
<template>
<div id="secondcomponent">
<h1>I am another page</h1>
<el-card class="box-card">
<div slot="header" class="clearfix">
<h1 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h1>
</div>
<div v-for="article in articles" class="text item">
{{article.title}}
</div>
</el-card>
<a> written by {{ author }} </a>
<p> 感谢 <a href="https://github.com/showonne">showonne</a>大神的技术指导</p>
</div>
</template>
<script>
export default {
data() {
return {
author: "微信公众号 jinkey-love",
articles: [],
}
},
mounted: function() {
this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
headers: {
},
emulateJSON: true
}).then(function(response) {
// 这里是处理正确的回调
this.articles = response.data.subjects
// this.articles = response.data["subjects"] 也可以
}, function(response) {
// 这里是处理错误的回调
console.log(response)
});
}
}
</script>
<style>
</style>
================================================
FILE: src/main.js
================================================
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
//开启debug模式
Vue.config.debug = true;
Vue.use(VueRouter);
Vue.use(VueResource);
// 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }
import secondcomponent from './component/secondcomponent.vue'
// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/first',
component: First
},
{
path: '/second',
component: secondcomponent
}
]
})
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
router: router,
render: h => h(App)
// components: { firstcomponent, secondcomponent }
}).$mount('#app')
================================================
FILE: webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {vue: 'vue/dist/vue.js'}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf)([\?]?.*)$/,
loader: "file-loader"
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
gitextract_s279jzeo/ ├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src/ │ ├── App.vue │ ├── component/ │ │ ├── firstcomponent.vue │ │ └── secondcomponent.vue │ └── main.js └── webpack.config.js
Condensed preview — 10 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (7K chars).
[
{
"path": ".babelrc",
"chars": 38,
"preview": "{\n presets: ['es2015', 'stage-0']\n}"
},
{
"path": ".gitignore",
"chars": 42,
"preview": "#log\n*.log\n\n#npm\nnode_modules\n\n#build\ndist"
},
{
"path": "README.md",
"chars": 319,
"preview": "# vue2\n\n> A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at loca"
},
{
"path": "index.html",
"chars": 290,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>vue2</title>\n <script src=\"https://cd"
},
{
"path": "package.json",
"chars": 750,
"preview": "{\n \"name\": \"vue2\",\n \"description\": \"A Vue.js project\",\n \"author\": \"\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"w"
},
{
"path": "src/App.vue",
"chars": 602,
"preview": "<template>\n <div id=\"app2\">\n <img src=\"./assets/logo.png\">\n <h1>Hello App!</h1>\n <firstcomponent></firstcompon"
},
{
"path": "src/component/firstcomponent.vue",
"chars": 267,
"preview": "<template>\n <div id=\"firstcomponent\">\n <h1>I am a component.</h1>\n <a> written by {{ author }} </a>\n </div>\n</te"
},
{
"path": "src/component/secondcomponent.vue",
"chars": 1027,
"preview": "<template>\n <div id=\"secondcomponent\">\n <h1>I am another page</h1>\n <el-card class=\"box-card\">\n <div slot=\"h"
},
{
"path": "src/main.js",
"chars": 894,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\nimport VueRouter from \"vue-router\";\nimport VueResource from 'vue-resou"
},
{
"path": "webpack.config.js",
"chars": 1342,
"preview": "var path = require('path')\nvar webpack = require('webpack')\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n "
}
]
About this extraction
This page contains the full source code of the Jinkeycode/vue2-example GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 10 files (5.4 KB), approximately 1.9k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.