vue-cli
npm install
脚手架: vue-loader
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
vue2.0
vue-loader和vue-router配合
style-loader css-loader
style!css
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-demo</title> <!-- <link rel="stylesheet" href="src/assets/css/animate.css"> 就不需要用loader了 --> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
import './assets/css/animate.css';
import './assets/css/1.css';
Vue.use(VueRouter);
const router=new VueRouter(routerConfig);
new Vue({
router,
el: '#app',
render: h => h(App)
})
router.config.js
import Home from './components/Home.vue' import News from './components/News.vue' export default{ routes:[ {path:'/home', component:Home}, {path:'/news', component:News}, {path:'*', redirect:'/home'} ] }
App.vue
<template> <div id="app"> {{msg}} <ul> <li> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </li> </ul> <div> <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <router-view></router-view> </transition> </div> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style> html,body{ overflow:hidden; } #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
New.vue
<template> <div id="news"> <h3>我是新闻页</h3> <ul> <li v-for="(val,index) in news"> {{val}} </li> </ul> </div> </template> <script> export default{ name:'news', data(){ return { news:['111111','22222222','3333333333','4444444444'] } } } </script> <style> li{ border-bottom:1px dashed #dedede; } </style>
Home.vue
<template> <h3>我是主页</h3> </template>
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' }, module: { rules: [ { test: /.vue$/, loader: 'vue', options: { // vue-loader options go here } }, { test: /.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /.css$/, loader: 'style!css' //顺序定死的，否则不能loader Css, }, { test: /.(png|jpg|gif|svg)$/, loader: 'file', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue' } }, 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 } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
package.json
{ "name": "vue-demo", "description": "A Vue.js project", "author": "strive <itstrive@sina.com>", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --port 8085", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^2.0.1", "vue-router": "^2.0.1" }, "devDependencies": { "animate.css": "^3.5.2", "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-preset-es2015": "^6.0.0", "cross-env": "^3.0.0", "css-loader": "^0.25.0", "file-loader": "^0.9.0", "style-loader": "^0.13.1", "vue-loader": "^9.7.0", "webpack": "^2.1.0-beta.25", "webpack-dev-server": "^2.1.0-beta.0" } }