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",