如何在webpack项目中使用Vue进行开发
创建webpack项目结构
安装Vue
-
使用命令: cnpm i vue -S
-
在main.js中导入:
-
//直接导入的Vue功能不完整,只提供了runtime-only方式,使用全部功能应该指定导入的路径 //import Vue from 'vue' //import Vue from 'vue/dist/vue'
-
也可以在webpack.config.js中配置resolve属性添加别名:
-
resolve:{ alias:{ "vue$":"vue/dist/vue.js" } }
-
包的查找规则:
-
找项目根目录中有没有node_modules文件夹
-
在node_modules中根据包名,找到vue文件夹
-
在vue文件夹中,找到package.json文件
-
在package.json文件中,查找main属性,main属性指定了这个包在被加载的时候的入口文件
-
runtime-only下的vue如何渲染组件
-
引入 .vue 文件, 也就是一个独立的vue组件, login.vue , 由 template script style 三部分组成
- 如果语法没有高亮提示, 可以在编译器中安装vue插件
-
导入vue组件:
-
import login from './login.vue'
-
创建vue实例:
-
var vm = new Vue({ el: '#app', data: { msg: '123', }, methods: {}, render: c => c(login), })
-
在html页面中创建一个id为app的div元素,作为vm要的容器
<div id="app"> <login></login> </div>
-
安装加载器: cnpm i vue-loader vue-template-compiler -D
-
添加匹配规则:
{test: /\.vue$/, use: 'vue-loader'}
-
新建vue加载器对象:
-
const vueLoaderPlugin = require('vue-loader/lib/plugin') plugins:{ new vueLoaderPlugin(), }
-
打包运行: npm run dev, 完成
export default和export的使用
- 在ES6中,规定了如何导入和导出模块
- 导入: import ‘模块路径’
- 导出: export default
- export default 向外暴露的成员,可以使用任意变量进行接收, 但是在一个模块中,export default 只允许向外暴露一次
- export 暴露的成员只能使用 { } 的形式接收–按需导出 , 导出的成员必须严格按照原来的名称在 { } 里按需接收, 可以使用关键字 ‘原名’ as ‘别名’ 更改名称, export 可以使用多次, 也可以和 export default 同时使用
webpack使用vue-router
-
安装加载器: cnpm i vue-router -S
-
导入vue-router包, 并且手动安装:
-
import { VueRouter } from "vue-router"; Vue.use(VueRouter)
-
创建路由对象并导入:
-
import account from "./main/Account.vue"; import goodlist from "./main/GoodList.vue"; var router = new VueRouter({ routes: [ //account goodlist { path: '/account', component: account }, { path: '/goodlist', component: goodlist }, ] })
-
挂载路由对象: 在vm实例中添加: router: router
-
Children子路由的使用
-
创建子路由组件并导入:
-
import login from "./main/subcom/Login.vue"; import register from "./main/subcom/Register.vue";
-
添加children子路由:
-
{ path: '/account', component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register }, ] },
-
在父组件中配置子组件:
-
<router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view>
-
执行: npm run dev ; 完成
-
.vue中的style标签
- 普通的style标签只支持普通的样式,如果要启用scss,less,需要设置lang属性
- 普通的style标签配置的是全局样式, 指定样式的作用于当前组件需要添加scoped属性, 推荐全部都加上scoped属性
- scoped属性选择器实现原理
- 通过css属性选择器实现
- 样式配置在全局中,scoped属性会分配给当前标签指定的样式
- scoped属性选择器实现原理
抽离路由模块
-
把main.js中的路由部分抽离出一个路由模块: router.js , 与main.js 位于平级目录下, 并向外暴露路由对象
-
import VueRouter from "vue-router"; import account from "./main/Account.vue"; import goodlist from "./main/GoodList.vue"; import login from "./main/subcom/Login.vue"; import register from "./main/subcom/Register.vue"; var router = new VueRouter({ routes: [ //account goodlist { path: '/account', component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register }, ] }, { path: '/goodlist', component: goodlist }, ] }) export default router
关于Mint UI (移动端开发)
-
mint ui是基于Vue.js的移动端组件库
-
安装: cnpm i mint-ui -S
-
引入组件:
-
//引入全部组件 import Mint from 'mint-ui'; Vue.use(Mint); //引入部分组件 import {Cell, Checklist } from 'mint-ui'; Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);
借助 babel-plugin-component 减小项目体积
-
安装: cnpm i babel-plugin-component -D
-
修改 .babelrc文件:
-
[ "component", { "libraryName": "mint-ui", "style": true } ]
-
按需导入:
-
import { Button } from "mint-ui"; Vue.component(Button.name, Button);
关于MUI
-
MUI类似于Bootstrap,只是提供一些代码片段
-
MUI可以用于任何项目, 但Mint UI只能用于 Vue
-
MUI只能自己手动安装
-
在github上下载mui包,拷贝至 src/lib 目录下
-
导入即可使用:
-
import "./lib/mui/css/mui.min.css";
-