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
================================================
vue2
================================================
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
================================================
Hello App!
================================================
FILE: src/component/firstcomponent.vue
================================================
================================================
FILE: src/component/secondcomponent.vue
================================================
================================================
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: '我是第 1 个子页面
' }
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
}
})
])
}