不用vue-cli搭建vue-webpack-express-mongoDB项目

1、npm init，生成package.json文件

2、npm install webpack@3.6.0 --save-dev

3、新建webpack.base.config.js文件、src文件夹在src内新建index.js，配置：output、entry、module、plugins

    这里的plugins里配置了html-webpack-plugin插件，用于打包html文件

4、引入vue

     4.1 新建index.html文件，div的id为app

     4.2 npm install vue@2.5.2 --save-dev

          npm install bable-core@6.22.1 --save-dev

          npm install vue-loader@13.3.0 --save-dev(在webpack.base.config.js中，module属性下配置loader，以编译vue文件)

          npm install vue-template-compiler@2.5.2 --save-dev

         注意:vue-loader隐式依赖babel-core包；webpack等依赖包的版本要匹配，若不匹配的话，webpack无法编译vue文件

     4.3 在src内新建app.vue

           index.js引入vue框架和app.vue，创建vue根实例(注意:运行时用render渲染函数，完整版时用template）

           配置vue完整版本：在webpack.base.config.js内，添加resolve属性即可--代码  resolve:{alias: {'vue$': 'vue/dist/vue.esm.js'}}

     4.4 package.json文件scripts添加"build":"webpack --config build/webpack.base.config.js"

          运行 npm run build，看编译是否成功，若成功可以在浏览器中预览index.html界面，看是否报错，此时若报错，一般是vue方面的错误

5、引入express 

     5.1 npm install express --save-dev

          npm install webpack-dev-middleware@1.12.0--save-dev

          npm install webpack-hot-middleware@1.2.0 --save-dev

          后两个依赖用于自动编译项目代码

    5.2 在webpack.base.config.js文件output添加publicPath: '/'这个属性

    5.3 新建server.js，使用express().use方法配置webpack-dev-middleware和webpack-hot-middleware，使得代码自动编译（这配置参考webpack官网-指南-开发-使用webpack-dev-middleware和模块热替换），无需手动npm run build。

6、 安装mongoDB数据库，启动mongDB数据库（cmd cd 到mongod所在的文件 mongod --dbpath=项目所设置mongoDB文件 --port=27017(端口)）

7、安装studio3TmongoDB可视化工具，查看数据库

8、完成

    完整代码地址 https://github.com/respectable2007/node-vue-express-mongoose

    参考资料：webpack https://webpack.docschina.org/guides/

                  webpack-hot-middleware https://github.com/webpack-contrib/webpack-hot-middleware

                  vue https://cn.vuejs.org/

                  iview https://www.iviewui.com/components/icon

                  express http://www.expressjs.com.cn/starter/installing.html

                  mongoose http://mongoosejs.com/docs/guide.html