Vue深入-26【环境配置、基础代码编写】

一.环境配置

npm init -y
npm install webpack webpack-cli webpack-dev-server
npm install html-webpack-plugin

(1).webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    devtool:'source-map',
    resolve:{
        modules:[path.resolve(__dirname,'source'),path.resolve('node_modules')]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'public/index.html')
        })
    ]
}

(2).package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server",
    "build":"webpack"
  },

二.基础代码编写

source/vue下建立index.js

src/index.js

import Vue from 'vue';
let vm = new Vue({
    el:'#app',
    data(){
        return{
            message:'Hello ZZa',
            nums:[1,5,7],
            person:{
                name:'Mike',
                age:20
            }
        }
    },
    computed:{},
    watch:{}
})

source/vue index.js

import { initState } from './observe';
function Vue(options){
    this._init(options);
}
Vue.prototype._init = function(options){
    let vm = this;
    vm.$options = options;
    initState(vm);
}
export default Vue;

observe/index.js

export function initState(){
    console.log('init State');
}