webpack与vue结合使用 系统管理员 2022-01-18 23:27 330阅读 0赞 ## 例1:在webpack使用web ## ### 安装vue ### \`cnpm i vue -S ### 在index.html使用插件表达式来访问vue实例中的数据 ### <div id="app"> { {msg}} <login></login> </div> 复制代码 ### 在main.js引入vue构造函数和创建实例 ### import Vue from 'vue' var login = { template: '<h3>这是登录组件</h3>' } var vm = new Vue({ el: '#app', data: { msg: '123' }, methods: {}, components: { login } }) 复制代码 ### 结果 ### 页面不显示数据,且有错误提醒 原因是在webpack中,使用import Vue from 'vue'导入的vue构造函数,功能不完整,只能提供runtime-only的方式。 即`import vue from vue`加载vue包的入口文件是vue.runtime.common.js 包查找规则: 项目根目录中有没有node_modules的文件夹, 在node_modules中根据包名,找到对应的vue文件, 在vue文件夹中,找package.json的包配置文件, 在package.json中,查找一个main属性(main属性指定了一个包在加载时的入口文件) 复制代码 ### 解决方式 ### * 在vue的package.json包配置文件,把main属性改为`"main": "dist/vue.js"`(不推荐) * 修改路径`import Vue from 'vue/dist/vue.js'` * 配置webpack.config.js `import Vue from 'vue' 在main.js中这里不变` resolve: { alias:{ //修改vue导入时候,包的路径 // "vue$": "vue/dist/vue.js" } } 复制代码 ### 整个项目列表 ### ## 例2:在webpck渲染组件 ## * 在webpack使用vue,在runtime-only 方式的情况下,页面中渲染一个组件(.vue),vue的实例的render函数可以实现 * 在index.html文件中 <div id="app"></div> 复制代码 * 在main.js文件中 import Vue from 'vue' import login from './login.vue' var vm = new Vue({ el: '#app', data: { msg: '123' }, methods: {}, // components: { // login // } // render: function (createElements){ // return createElements(login) // } render: c => c(login) }) 复制代码 * 在src目录下创建一个login.vue文件 <template> <div> <h1>这是登录组件,使用 .vue 文件定义出来的 --- { {msg}}</h1> </div> </template> <script> export default { data() { // 注意:组件中的 data 必须是 function return { msg: "123" }; }, methods: { show() { console.log("调用了 login.vue 中的 show 方法"); } } }; </script> <style> </style> 复制代码 * webpack无法打包.vue文件,需安装相关的loader,并在webpack.config.js中进行相关配置 cnpm i vue-loader vue-template-compiler -D 复制代码 var VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { plugins: [ //配置插件 new VueLoaderPlugin() ], module: { //配置loader rules: [ { test: /\.vue$/, use: 'vue-loader' } ] } } 复制代码 * 结果如下 ## 例3 在webpack使用vue-router(在例2基础上) ## * 安装vue-router `cnpm i vue-router -D` * main.js import Vue from 'vue' import app from './App.vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import account from './Account.vue' import goodslist from './GoodsList.vue' var router = new VueRouter({ routes: [ //路由规则 { path: '/account', component: account }, { path: '/goodslist', component: goodslist } ] }) var vm = new Vue({ el: '#app', render: c => c(app), router //挂载路由 }) 复制代码 * Account.vue <template> <div> <h1>这是一个account组件</h1> </div> </template> <script> export default { } </script> <style lang="scss" scoped> //普通style标签只支持css样式,要启动scss或less,要设置style元素的lang属性 body{ html{ font-style: italic } } </style> 复制代码 * GoodsList <template> <div> <h1>这是一个goodslist组件</h1> </div> </template> <script> export default { } </script> <style scoped> div{ color: red; } </style> 复制代码 * 结果 ## 例4:在webpack vue 实现路由嵌套(在例3基础上) ## 转载于:https://juejin.im/post/5ccad2046fb9a031fb2ce117
还没有评论,来说两句吧...