本文最后更新于 865 天前，其中的信息可能已经有所发展或是发生改变。
1.Webpack中使用Vue
运行将vue安装为运行依赖；
导入vue
- 包的查找规则：
- 找 项目根目录中有没有 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 default 只允许向外暴露1次 在一个模块中，可以同时使用 export default 和 export 向外暴露成员 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】 export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收； 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；
4.在vue组件页面中，集成vue-router路由模块
- 安装
vue-routernpm install vue-router -S - 导入路由模块：
import VueRouter from 'vue-router' - 安装路由模块：
Vue.use(VueRouter); - 导入需要展示的组件:
import account from './main/Account.vue'抽取路由模块到
main.js导入
5.使用webpack打包发布项目
在项目上线之前，我们需要将整个项目打包并发布。 A.配置package.json "scripts":{ "dev":"webpack-dev-server", "build":"webpack -p" } B.在项目打包之前，可以将dist目录删除，生成全新的dist目录
Post Views: 376
