本文最后更新于 1824 天前,其中的信息可能已经有所发展或是发生改变。
1.Webpack中使用Vue
- 运行
cnpm i vue -S
将vue安装为运行依赖; - 导入vue
import Vue from 'vue'
注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供像网页中那样的使用方式;
方式一:import Vue from '../node_modules/vue/dist/vue.js'
方式二:配置webpack.config.js
resolve: { alias: { // 修改 Vue 被导入时候的包的路径 "vue$": "vue/dist/vue.js" } }
- 包的查找规则:
- 找 项目根目录中有没有 node_modules 的文件夹
- 在 node_modules 中 根据包名,找对应的 vue 文件夹
- 在 vue 文件夹中,找 一个叫做 package.json 的包配置文件
- 在 package.json 文件中,查找 一个 main 属性【main属性指定了这个包在被加载时候,的入口文件】
2.webpack中使用Vue组件
- 默认,webpack 无法打包 .vue 文件,需要安装 相关的loader:
cnpm i vue-loader vue-template-compiler -D
- 在配置文件中,新增loader哦配置项
{ test:/\.vue$/, use: 'vue-loader' }
- 导入 login 组件
import login from './login.vue'
- 在 webpack 中,如果想要通过 vue, 把一个组件放到页面中去展示,vm 实例中的 render 函数可以实现
render: function (createElements) {
return createElements(login)
} - 简写`render: c => c(login)'
3.ES6中语法使用总结
- 使用
export default
和export
导出模块中的成员;var defobj={ name:"23", id:"2" } export default defobj export var obj2={ bsd:"555" } export var obj1={ name:"4" }
- 使用
import ** from **
还有import {a, b} from '模块标识'
导入其他模块
import def,{obj1,obj2} from './js/testexport.js'
注意: export default 向外暴露的成员,可以使用任意的变量来接收
在一个模块中,export default 只允许向外暴露1次
在一个模块中,可以同时使用 export default 和 export 向外暴露成员
使用 export 向外暴露的成员,只能使用 { } 的形式来接收,这种形式,叫做 【按需导出】
export 可以向外暴露多个成员, 同时,如果某些成员,我们在 import 的时候,不需要,则可以 不在 {} 中定义
使用 export 导出的成员,必须严格按照 导出时候的名称,来使用 {} 按需接收;
使用 export 导出的成员,如果 就想 换个 名称来接收,可以使用 as 来起别名;
4.在vue组件页面中,集成vue-router
路由模块
- 安装
vue-router
npm install vue-router -S
- 导入路由模块:
import VueRouter from 'vue-router'
- 安装路由模块:
Vue.use(VueRouter);
- 导入需要展示的组件:
import account from './main/Account.vue'
- 抽取路由模块到
router.js
import VueRouter from 'vue-router' import com1 from '../components/tmp1.vue' import com2 from '../components/tmp2.vue' import com3 from '../components/tmp3.vue' import com31 from '../components/tmp31.vue' import com32 from '../components/tmp32.vue' var router = new VueRouter({ routes: [ {path:'/',components:{ 'comt1':com1, 'comt2':com2, 'comt3':com3 }}, { path: '/com1', component: com1 }, { path: '/com2', component: com2 }, { path: '/com3', component: com3 , children:[ {path:'com31',component:com31}, {path:'com32',component:com32} ] } ] }) // 把路由对象暴露出去 export default router
- main.js导入
import router from './js/router.js' import VueRouter from 'vue-router' Vue.use(VueRouter) var vm1 = new Vue({ el: "#app2", router })
5.使用webpack打包发布项目
在项目上线之前,我们需要将整个项目打包并发布。
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在项目打包之前,可以将dist目录删除,生成全新的dist目录