本文共 8103 字，大约阅读时间需要 27 分钟。

注意：

有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

在普通页面中使用render函数渲染组件

  
     
     
         
   
    
    
444444
  
   
  

在webpack中配置.vue组件页面的解析

1. 运行cnpm i vue -S将vue安装为运行依赖；

2. 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；

3. 运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；

4. 在webpack.config.js中，添加如下module规则：

module: {    rules: [      { test: /\.css$/, use: ['style-loader', 'css-loader'] },      { test: /\.vue$/, use: 'vue-loader' }    ]  }

// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的var path = require('path')// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点var htmlWebpackPlugin = require('html-webpack-plugin')// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建module.exports = {
      entry: path.join(__dirname, './src/main.js'), // 入口文件  output: {
     // 指定输出选项    path: path.join(__dirname, './dist'), // 输出路径    filename: 'bundle.js' // 指定输出文件的名称  },  plugins: [ // 所有webpack  插件的配置节点    new htmlWebpackPlugin({
          template: path.join(__dirname, './src/index.html'), // 指定模板文件路径      filename: 'index.html' // 设置生成的内存页面的名称    })  ],  module: {
     // 配置所有第三方loader 模块的    rules: [ // 第三方模块的匹配规则      {
     test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader      {
     test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader      {
     test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader      {
     test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串      {
     test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader       {
     test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法      {
     test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader    ]  },  resolve: {
        alias: {
     // 修改 Vue 被导入时候的包的路径      // "vue$": "vue/dist/vue.js"    }  }}

5. 创建login.vue组件页面：

6. 创建main.js入口文件：

// 如何在 webpack 构建的项目中，使用 Vue 进行开发// 复习 在普通网页中如何使用vue： // 1. 使用 script 标签 ，引入 vue 的包// 2. 在 index 页面中，创建 一个 id 为 app div 容器// 3. 通过 new Vue 得到一个 vm 的实例// 在webpack 中尝试使用 Vue：// 注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；import Vue from 'vue'// import Vue from '../node_modules/vue/dist/vue.js'// 回顾 包的查找规则：// 1. 找 项目根目录中有没有 node_modules 的文件夹// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】// var login = {
    //   template: '
这是login组件，是使用网页中形式创建出来的组件
'// }// 1. 导入 login 组件import login from './login.vue'// 默认，webpack 无法打包 .vue 文件，需要安装 相关的loader： //  cnpm i vue-loader vue-template-compiler -D//  在配置文件中，新增loader哦配置项 { test:/\.vue$/, use: 'vue-loader' }var vm = new Vue({
      el: '#app',  data: {
        msg: '123'  },  // components: {
      //   login  // }  /* render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现    return createElements(login)  } */  render: c => c(login)})// 总结梳理： webpack 中如何使用 vue :// 1. 安装vue的包：  cnpm i vue -S// 2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader    cnpm i vue-loader vue-template-complier -D// 3. 在 main.js 中，导入 vue 模块  import Vue from 'vue'// 4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style// 5. 使用 import login from './login.vue' 导入这个组件// 6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })// 7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

在使用webpack构建的Vue项目中使用模板对象？

1. 在webpack.config.js中添加resolve属性：

resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js'    }  }

ES6中语法使用总结

1. 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export

2. 使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块

3. 使用箭头函数：(a, b)=> { return a-b; }

在vue组件页面中，集成vue-router路由模块

1. 导入路由模块：

import VueRouter from 'vue-router'

2. 安装路由模块：

Vue.use(VueRouter);

3. 导入需要展示的组件:

import login from './components/account/login.vue'import register from './components/account/register.vue'

4. 创建路由对象:

var router = new VueRouter({  routes: [    { path: '/', redirect: '/login' },    { path: '/login', component: login },    { path: '/register', component: register }  ]});

5. 将路由对象，挂载到 Vue 实例上:

var vm = new Vue({  el: '#app',  // render: c => { return c(App) }  render(c) {    return c(App);  },  router // 将路由对象，挂载到 Vue 实例上});

6. 改造App.vue组件，在 template 中，添加router-link和router-view：

   
    登录
       
   
    注册
       
   

组件中的css作用域问题

抽离路由为单独的模块

• main.js

import Vue from 'vue'// 1. 导入 vue-router 包import VueRouter from 'vue-router'// 2. 手动安装 VueRouter Vue.use(VueRouter)// 导入 app 组件import app from './App.vue'// 导入 自定义路由模块import router from './router.js'var vm = new Vue({
      el: '#app',  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中  router // 4. 将路由对象挂载到 vm 上})// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 
    中去；

• router.js

import VueRouter from 'vue-router'// 导入 Account 组件import account from './main/Account.vue'import goodslist from './main/GoodsList.vue'// 导入Account的两个子组件import login from './subcom/login.vue'import register from './subcom/register.vue'// 3. 创建路由对象var router = new VueRouter({
      routes: [    // account  goodslist    {
          path: '/account',      component: account,      children: [        {
     path: 'login', component: login },        {
     path: 'register', component: register }      ]    },    {
     path: '/goodslist', component: goodslist }  ]})// 把路由对象暴露出去export default router

• App.vue

• login.vue

使用 饿了么的 MintUI 组件

1. 导入所有MintUI组件：

import MintUI from 'mint-ui'

2. 导入样式表：

import 'mint-ui/lib/style.css'

3. 在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：

Vue.use(MintUI)

4. 使用的例子：

   
    primary
   

Mint-UI中按需导入的配置方式

• main.js

import Vue from 'vue'// 1. 导入 vue-router 包import VueRouter from 'vue-router'// 2. 手动安装 VueRouter Vue.use(VueRouter)// 导入bootstrap样式import 'bootstrap/dist/css/bootstrap.css'import './css/app.css'// 导入 MUI 的样式表， 和 Bootstrap 用法没有差别import './lib/mui/css/mui.min.css'// 导入所有的 MIntUI 组件// 导入 Mint-UI// import MintUI from 'mint-ui' //把所有的组件都导入进来// // 这里 可以省略 node_modules 这一层目录// import 'mint-ui/lib/style.css'// // 将 MintUI 安装到 Vue 中// Vue.use(MintUI) // 把所有的组件，注册为全局的组件// 按需导入 Mint-UI组件import {
     Button } from 'mint-ui'// 使用 Vue.component 注册 按钮组件Vue.component(Button.name, Button)// console.log(Button.name)// 导入 app 组件import app from './App.vue'// 导入 自定义路由模块import router from './router.js'var vm = new Vue({
      el: '#app',  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中  router // 4. 将路由对象挂载到 vm 上})// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 
    中去；

• App.vue

使用 MUI 代码片段

注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；

因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；

从体验上来说， MUI和Bootstrap类似；

理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

1. 导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

2. 在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

3. 根据官方提供的文档和example，尝试使用相关的组件

转载地址：http://kixmi.baihongyu.com/