在webpack项目中使用Vue进行开发

如何在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"
          }
      }
  

• 包的查找规则:

  1. 找项目根目录中有没有node_modules文件夹

  2. 在node_modules中根据包名,找到vue文件夹

  3. 在vue文件夹中,找到package.json文件

  4. 在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属性会分配给当前标签指定的样式

抽离路由模块

• 把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";