{ "name": "vue-todolist", "description": "a vue component of todolist", "version": "1.0.0", "author": "wuwhs", "license": "MIT", "private": false, "main": "./dist/todoList.min.js", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^2.5.11" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
主要安装一些必要的依赖插件，如vue、babel和webpack
2. 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: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
webpack的基本热更新以及打包配置，可以参考webpack中文官网
3. .babelrc文件
{ "presets": [ ["env", { "modules": false }], "stage-3" ] }
ES6转化工具babel配置
4. main.js项目入口文件
import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })
5. App.vue vue根组件
<template> <div> Hello, todo-list! </div> </template> <script> export default { name: 'app' } </script>
6. index.html 页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>todolist</title> </head> <body> <div></div> <script src="https://www.jb51.net/article/dist/build.js"></script> </body> </html>
输入命令npm install，所有依赖包安装完成后，npm run dev，启动成功。
PS：遇到一个坑，先用npm install感觉太慢了，于是断掉了，用cnpm install，安装完成后，启动总是缺少这个依赖包，那个依赖包，没完没了，于是，把node_modules全删了，重新cnpm install一气呵成正常了。cnpm安装会引入一些版本文件，前面npm已装好的包没有，于是就出现了报错，找不到某某依赖包。
至此，打包工具webpack的基本配置就完成了，接下来就是写vue组件了。
写todo-list的vue组件
todo-list组件在很多地方都会作为一个案例使用，在这就直接模范vue官网的案例来写了。
1. todoList.vue组件——列表
<template> <div"> <input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo" > <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div> </template> <script> import TodoItem from './TodoItem' export default { components: { TodoItem }, data () { return { newTodoText: '', todos: [ { id: 1, title: 'Do the dishes', } ], nextTodoId: 2 } }, methods: { addNewTodo: function () { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' } } } </script>
2. todoList.vue组件——列表项
减小耦合度，把列表项单独拿出来做一个组件。