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

梁英喆
2023-12-01

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

转载于:https://www.cnblogs.com/respect2017/p/9262784.html

 类似资料: