vue、iview和egg分別是前端領域的流行框架和node.js后端框架。如果將三者結合起來使用,可以使前后端交互更加順暢,代碼質量更高效。下面將介紹如何使用vue、iview和egg進行開發。
首先,安裝vue、iview和egg的依賴包:
npm install vue-cli -g npm install iview --save npm install egg --save
然后,使用vue-cli創建項目:
vue init webpack myproject cd myproject npm install
在組件中引入iview:
import Vue from 'vue' import iView from 'iview' Vue.use(iView)
在webpack.config.js中配置iview的按需加載:
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'less': 'vue-style-loader!css-loader!less-loader' }, preLoaders: { html: 'vue-html-loader' } }, exclude: /node_modules/ }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }
在egg項目中安裝egg-view-vue插件,并將插件配置到config/config.default.js中:
// config/config.default.js exports.view = { defaultViewEngine: 'vue', mapping: { '.vue': 'vue' } }; exports.vuessr = { layout: path.join(appInfo.baseDir, 'app/view/layout.html'), }; exports.webpack = { webpackConfigList: [ require(path.join(appInfo.baseDir, 'config/config.local.webpack.js')) ], };
最后,在前端和后端都創建相應的api接口,將前端和后端進行聯合開發即可。
下一篇vue 10漢化