webpack学习(四)在webpack中使用vue&export default 和 export使用方式&vue-router使用方式&webpack中子路由和样式设置

一、在webpack中使用vue

1.安装 vue命令

npm i vue -S

2.在webpack中使用Vue

• 方法1
  在main.js中直接导入vue.js中的路径
  import Vue from ‘…/node_modules/vue/dist/vue.js’
• 方法2
  main.js中通常写法：
  import Vue from ‘vue’
  在webpack.config.js中添加一个resolve属性

 resolve: {
       alias: {
        //    修改 Vue被导入时候包的路径
           "vue$": "vue/dist/vue.js"
       } 
    },

• 包的查规则:
  1.找项目中根路径有没有 node_modules的文件夹
  2.在 node_modules中根据包名找对应的vue文件夹
  3.在 vue 文件夹中，找到一个叫做 package.json的包配置文件
  4.在 package.json 文件夹中 查找一个main属性 【main属性指定了这个包在被加载时候的入口文件】

第三种：使用vue的组件 推荐

总结: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",data:{msg:‘123’},render: c=> c(login))
7.在页面中创建一个 id 为 app的 div元素，作为我们 vm 实例要控制的区域

注意:Vue-loader为15版本的时候需要配合着插件使用:
方法:
https://blog.csdn.net/leeue/article/details/94397476

---

二、export default 和 export使用方式

在 ES6 中使用 export default 和 export向外暴露成员:

//在 ES6中导入模块，使用: import 模块名称 from ‘模块标识符’ import ‘表示路径’

• 1.export default 使用方式:
  语法格式:
  test.js:

var  info = {
    name: 'zs',
    age: '20'
}
export default info // 使用 export default 向外暴露成员 

使用方式: main.js中

import m1 from '../test.js'

使用export default 向外暴露成员注意

1.export default 向外暴露的成员 可以使用任意的变量来接受
2.在一个模块中，export default 只允许向外暴露1次
3.在一个模块中也可使用 export 向外暴露成员变量

• 2 使用export来想外暴露成员

语法: test.js中

export var title = '第二个export'

export var content = {name:'第三个export',age:20}

main.js中引用:

import m1, {title,content}from '../test.js'
console.log(m1)
console.log(title)
console.log(content.name)

使用 export向外暴露成员注意点

1.使用export向外暴露成员变量，只能用户 { 暴露名 } 的形式来接受，这种形式叫做 [按需导出]

2.export可以向外暴露多个成员,同时如果某些成员我们在import的时候，不需要则可以不在 {} 中定义
3. 使用 export 导出的成员，必须严格的按照导出时候的名称来使用 {} 按需接受
4. 注意: 使用 export导出成员，如果就想换个名称来接受，可以使用 as 来起别名

---

四、webpack中使用vue-router

1.使用命令安装 vue-router

npm i vue-router

2.导入VueRouter

import VueRouter from 'vue-router'

3.手动安装 VueRouter

Vue.use(VueRouter)

4.创建路由

var router = new VueRouter({
    routes: [
        {path: '/account',component: account},
        {path: '/goodsList',component: goodsList}
    ]
})

var vm = new Vue({

    el: "#app",
    render: c => c(app),// render 会把 el指定的容器中，
    //所有的内容都清空覆盖，所以不要把路由的router-view 和router-link 所以不要把
    //路由的 router-view 和 router-link 直接写到 el 所控制的元素中 
    // el 就是 createElements
    router, //4.将路由对象挂载到 vm 上
})

注意: App这个组件是通过 VM实例的render函数渲染出来的， render函数如果要渲染组件，渲染出来的组件只能放到el: ‘#app’ 所指定的元素中。
Account 和 GoodsList 组件是通过路由匹配监听到的，所以，这两个组件只能展示到属于路由的
<router-view></router-view>中去

五、webpack中使用子路由 和样式设置

使用子路由跟上面的方式是差不多的，只不过在创建路由对象的时候
添加一个 children 属性

// 3.创建路由对象
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                {path: 'login', component:login},
                {path: 'register',component: register}
            ]
        },
        {path: '/goodsList',component: goodsList}
    ]
})

2.组件中样式设置 scoped

表示这个样式只在当前这个这个组件中生效

3.组件中使用 scss

<style lang="scss"  scoped>
/* 普通的 style 标签只支持普通的样式，如果想要启用 scss 或者 */
body{
  div{
    font-style: italic;
  }
}

</style>

只要我们组件中有style属性，都推荐开启scoped属性

案例中需要安装的包和加载器

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.8.1",