前端-vue框架學(xué)習(xí)筆記(一)-項目構(gòu)建

環(huán)境：vue-cli+webstorm/vue+webstorm

vue項目構(gòu)建與實戰(zhàn)
使用Vue快速開發(fā)單頁應(yīng)用－主體結(jié)構(gòu)
webpack+vue+vueRouter模塊化構(gòu)建完整項目實例超詳細(xì)步驟（附截圖旱物、代碼遥缕、入門篇）
關(guān)于自己配置有關(guān)webpack.config.js和vue項目搭建相關(guān)步驟

2.構(gòu)建項目

2.1 vue-cli腳手架構(gòu)建項目

??使用vue-cli腳手架可以自動生成vue項目的基礎(chǔ)目錄文件，使用代碼如下：

//使用npm全局安裝vue-cli宵呛；(vue -V)(1.在安裝vue-cli時单匣，已經(jīng)自帶安裝webpack。)
npm install -g vue-cli  
//生成項目模板（1.webpack是模板名稱宝穗，這里我們需要使用webpack的打包功能户秤，所以使用webpack；2.projectname是項目名稱）
vue init webpack projectname
cd my-project
npm install
npm run dev

??執(zhí)行上面命令后讽营，我們將生成下面的文件結(jié)構(gòu)，并開一個服務(wù)泡徙，其自動生成的基礎(chǔ)文件如下：

├── build // webpack/node配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config // 環(huán)境配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules // npm包文件
├── src // 靜態(tài)資源文件
│   ├── assets            
│   │    └── logo.png
│   ├── components  
│   │    └── Hello.vue 
│   ├── router
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 編碼風(fēng)格配置文件
├── .eslintignore // eslintrc忽略文件
├── .eslintrc.js // 管理和檢測js代碼風(fēng)格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首頁模板
└── README.md // 描述文件

??這樣的構(gòu)建方式其實并不適用于所有項目橱鹏，很多文件項目可能都不會用到，并且如果對自動生成的文件一無所知，那么后期維護起來也會非常的吃力莉兰。所以不推薦新手使用vue-cli構(gòu)建挑围，而是推薦大家參考vue-cli生成的文件從零開始構(gòu)建一個vue項目。
??想要了解自動生成的webpack文件配置糖荒，可以參考這篇文章：vue-cli中的webpack配置

2.2 自定義構(gòu)建項目

??相比vue-cli構(gòu)建杉辙，自定義構(gòu)建就顯得靈活得多，但是它需要了解構(gòu)建的步驟和原理捶朵，要求也就隨之提高了蜘矢。自定義構(gòu)建分為以下幾步：

文件/文件夾創(chuàng)建
package.json文件創(chuàng)建
webpack配置文件創(chuàng)建
入口文件創(chuàng)建
vue組件編寫
路由配置

2.2.1 文件/文件夾創(chuàng)建

文件創(chuàng)建

??按照上方的圖示，需要從零開始創(chuàng)建以上文件和文件夾综看，每一個文件都有其自己的用途品腹。

2.2.2 webpack.config.js文件配置和相關(guān)依賴包安裝

??使用npm init -y命令可以快速的創(chuàng)建一個package.json文件。

Webpack的配置和使用
npm install --save-dev webpack
??使用時红碑，先在package.json的script標(biāo)簽中添加一條命令（就和全局的命令一模一樣）然后通過npm run 命令名 來執(zhí)行命令

webpack使用

webpack.config.js設(shè)置：
基礎(chǔ)配置項

var path = require("path") 
module.exports = {
    entry: path.join(__dirname, "入口文件路徑"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    }
}

使用webpack打包別的類型的文件
?? webpack默認(rèn)支持的文件類型舞吭，只有js文件，如果在項目中出現(xiàn)了其他類型的文件析珊，那么webpack本身是無法進行處理的羡鸥，所以我們需要為每一個類型的文件，單獨指定一個加載器（loader）

css
??在webpack的項目中忠寻，如果要使用css文件惧浴，我們可以將css文件當(dāng)做一個模塊，使用import的方式引入到j(luò)s當(dāng)中锡溯，最終webpack會將css文件中的內(nèi)容赶舆，一起打包到最終的js文件中，也可以在頁面中生效祭饭。要打包css文件芜茵，就需要給css文件配置loader，需要兩個loader： style-loader css-loader
安裝相應(yīng)的loader：
npm install --save-dev style-loader css-loader
??在webpack.config.js中配置css文件對應(yīng)的loader：

var path = require("path") 
module.exports = {
    entry: path.join(__dirname, "入口文件路徑"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module屬性中就可以進行l(wèi)oader的配置
    module: {
        rules: [
            {
                test: /\.css$/,
                //use中放的就是加載器的名稱倡蝙，要注意九串，調(diào)用的順序是從后向前的
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

less sass
less需要的loader: style-loader css-loader less-loader 依賴項： less
sass需要的loader: style-loader css-loader sass-loader 依賴項： node-sass
安裝相應(yīng)的loader:

npm install --save-dev less-loader less 
npm install --save-dev sass-loader node-sass

webpack.config.js配置加載器

var path = require("path")
module.exports = {
    entry: path.join(__dirname, "入口文件路徑"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    //module屬性中就可以進行l(wèi)oader的配置
    module: {
        rules: [
           {
                test: /\.css$/,
                //use中放的就是加載器的名稱，要注意寺鸥，調(diào)用的順序是從后向前的
                use: ["style-loader", "css-loader"]
            },
            {
               //less文件
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                //sass文件
                test:  /\.sass$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }
}

圖片字體打包
圖片需要的loader: url-loader 依賴項： file-loader
字體需要的loader: url-loader
安裝相應(yīng)的loader:
npm install --save-dev url-loader file-loader
webpack.config.js配置加載器

var path = require("path")
module.exports = {
     entry: path.join(__dirname, "入口文件路徑"),
     output: {
         path: path.join(__dirname, "dist"),
         filename: "bundel.js"
     },
     //module屬性中就可以進行l(wèi)oader的配置
     module: {
         rules: [
             {
                 test: /\.css$/,
                 //use中放的就是加載器的名稱猪钮，要注意，調(diào)用的順序是從后向前的
                 use: ["style-loader", "css-loader"]
             },
             {
                 //less文件
                 test: /\.less$/,
                 use: ["style-loader", "css-loader", "less-loader"]
             },
             {
                 //sass文件
                 test:  /\.sass$/,
                 use: ["style-loader", "css-loader", "sass-loader"]
             },
             {
                 //圖片文件
                 test:  /\.(jpg|gif|png|jpeg|svg|bmp)$/,
                 use: [{
                     loader: "url-loader",
                     options: {
                //如果圖片超過下面這個數(shù)據(jù)所標(biāo)注的大小胆建，那么圖片將不會被轉(zhuǎn)換成base64的格式烤低，直接會將圖片文件扔到dist目錄里
                         limit: 1024 * 50
                     }
                 }]
             },
             {
                 //字體文件
                 test: /\.(woff|woff2|eot|ttf)$/,
                 use: ["url-loader"]
             }
         ]
     }
 }

ES6 代碼打包和babel-cli的使用
用到的loader: babel-loader 依賴項： babel-core
用到轉(zhuǎn)碼規(guī)則： babel-preset-env
安裝相應(yīng)的loader:

npm install --save-dev babel-loader babel-core 
npm install babel-cli -g
npm install babel-preset-env

webpack.config.js配置加載器
創(chuàng)建一個.babelrc 用來指定轉(zhuǎn)碼的規(guī)則

     {
         presets: [
             "env"
         ]
     }

webpack.config.js配置加載器

    var path = require("path") 
    module.exports = {
        entry: path.join(__dirname, "入口文件路徑"),
        output: {
            path: path.join(__dirname, "dist"),
            filename: "bundel.js"
        },
        //module屬性中就可以進行l(wèi)oader的配置
        module: {
            rules: [
                {
                    test: /\.css$/,
                    //use中放的就是加載器的名稱，要注意笆载，調(diào)用的順序是從后向前的
                    use: ["style-loader", "css-loader"]
                },
                {
                    //less文件
                    test: /\.less$/,
                    use: ["style-loader", "css-loader", "less-loader"]
                },
                {
                    //sass文件
                    test:  /\.sass$/,
                    use: ["style-loader", "css-loader", "sass-loader"]
                },
                {
                    //圖片文件
                    test:  /\.(jpg|gif|png|jpeg|svg|bmp)$/,
                    use: [{
                        loader: "url-loader",
                        options: {
                            //如果圖片超過下面這個數(shù)據(jù)所標(biāo)注的大小扑馁，那么圖片將不會被轉(zhuǎn)換成base64的格式涯呻，直接會將圖片文件扔到dist目錄里
                            limit: 1024 * 50
                        }
                    }]
                },
                {
                    //字體文件
                    test: /\.(woff|woff2|eot|ttf)$/,
                    use: ["url-loader"]
                },
                {
                    //ES6
                    test: /\.js$/,
                    //排除node_modules中的內(nèi)容
                    exclude: /node_modules/,
                    use: ["babel-loader"]
                }
            ]
        }
    }

html-webpack-plugin的使用
??作用：將src目錄下的index.html作為模板，每次在打包的時候腻要，都會將其復(fù)制到dist目錄下复罐，并且自動為其引入bundle.js
安裝相應(yīng)的loader:
npm install --save-dev html-webpack-plugin
webpack.config.js配置

var HtmlWebpackPlugin = require("html-webpack-plugin")
var path = require("path")
module.exports = {
    entry: path.join(__dirname, "入口文件路徑"),
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundel.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src/index.html")
        })
    ]
}

webpack-dev-server的使用
??如果沒有這個東西，那么每次在修改代碼之后雄家，都需要重新進行打包效诅，才能看到效果！
??webpack-dev-server可以啟動一個簡易的http服務(wù)器趟济，當(dāng)代碼發(fā)生改變的時候乱投，實時的進行打包并且刷新頁面顯示效果！這個東西只會打包更新了的內(nèi)容咙好，并不會將整個項目完整的打包篡腌，所以效率會比較高，而且它打包的內(nèi)容都是直接放在內(nèi)存里面的勾效，所以訪問速率也會非赤诘浚快。
安裝:
npm install --save-dev webpack-dev-server
使用:
直接給命令傳參
webpack-dev-server --port 9000 --contentBase ./src --hot
在webpack.config.js中進行配置

var path = require("path");   
 //如果使用webpack.config方式進行配置层宫，那么必須有這個包引入
var webpack = reuqire("webpack");
module.exports = {
       entry: path.join(__dirname, "入口文件路徑"),
       output: {
           path: path.join(__dirname, "dist"),
           filename: "bundel.js"
        },
        devServer: {
            port: 9999,
            contentBase: "./src",
            hot: true
       },
        plugins:[
            //這邊是給dev-server設(shè)置一個插件杨伙，如果沒有這個插件則熱更新會報錯
            new webpack.HotModuleReplacementPlugin()
        ]
}

??由于在之前已經(jīng)在package.json文件的script中進行了配置，所以我們可以直接用npm來執(zhí)行命令萌腿。

2.2.3 入口文件創(chuàng)建限匣、vue組件編寫與路由配置

routes.js文件放路由配置文件；

import Vue from 'vue' // 引入vue
import Router from 'vue-router'  // 引入路由
Vue.use(Router) // 注冊路由
import Index from '../views/index.vue'  // 引入編寫的組件

export default new Router({
    mode: 'hash',
    routes: [
        { 
            path: '/', 
            name: 'index', 
            component: Index,
        },
        { path: '*', redirect: '/' },
    ]
})

index.html首頁入口文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

App.vue是項目入口文件毁菱，是我們的主組件米死，所有頁面都是在App.vue下進行切換的。

<template>
  <div id="app">
    ...  //組件
  </div>
</template>
<script>
...//組件調(diào)用
export default {
  name: 'app',
  data () {
    return {
    }
  },
  components: {
    ... //組件
  },
}
</script>
<style>
#app {
...  //全局樣式
}
</style>

main.js這是項目的核心文件贮庞。全局的配置都在這個文件里面配置峦筒，初始化vue實例并使用需要的插件。

import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'
import './assets/styles/base.css'
Vue.config.debug = true;//開啟錯誤提示

new Vue({
        router,
        el: '#app',
        ...
})

commponents目錄里面放公共組件窗慎，views文件放詳情頁面物喷。
單文件組件就是將組件相關(guān)的內(nèi)容（HTML JS CSS）全部放到了一個.vue文件當(dāng)中。

<template>
     <div>
         //這里就是組件的html部分也就是所謂的模板
     </div>
 </template> 
 <script>
  export default {
        data(){},
        filters: {},
       components: {},
       watch: {},
       directives: {},
       created(){}
   }
</script>
 // scoped屬性標(biāo)志著這個style標(biāo)簽中的css樣式是只對當(dāng)前組件有效遮斥！
 <style scoped>
 </style>

3 拓展

3.1 `--save-dev`與`--save`

??npm install 在安裝 npm 包時峦失，有兩種命令參數(shù)可以把它們的信息寫入 package.json 文件，一個是npm install --save另一個是 npm install --save-dev术吗，他們表面上的區(qū)別是--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下尉辑，--save-dev 則添加到 package.json 文件 devDependencies 鍵下，
--save-dev 是你開發(fā)時候依賴的東西较屿，--save 是你發(fā)布之后還依賴的東西隧魄。

3.2 css-loader 和 style-loader

??css-loader 和 style-loader实幕，二者處理的任務(wù)不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現(xiàn) require()的功能,style-loader將所有的計算后的樣式加入頁面中堤器，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

前端-vue框架學(xué)習(xí)筆記(一)-項目構(gòu)建

前端-vue框架學(xué)習(xí)筆記(一)-項目構(gòu)建

目錄

1.學(xué)習(xí)文檔

1.1 介紹

1.2 vue語法介紹

1.3 vue項目構(gòu)建學(xué)習(xí)文檔

2.構(gòu)建項目

2.1 vue-cli腳手架構(gòu)建項目

2.2 自定義構(gòu)建項目

2.2.1 文件/文件夾創(chuàng)建

2.2.2 webpack.config.js文件配置和相關(guān)依賴包安裝

2.2.3 入口文件創(chuàng)建、vue組件編寫與路由配置

3 拓展

3.1 `--save-dev`與`--save`

3.2 css-loader 和 style-loader

1.學(xué)習(xí)文檔

1.1 介紹：

1.2 vue語法介紹：

1.3 vue項目構(gòu)建學(xué)習(xí)文檔

2.構(gòu)建項目

2.1 vue-cli腳手架構(gòu)建項目

2.2 自定義構(gòu)建項目

2.2.1 文件/文件夾創(chuàng)建

2.2.2 webpack.config.js文件配置和相關(guān)依賴包安裝

2.2.3 入口文件創(chuàng)建限匣、vue組件編寫與路由配置

3 拓展

3.1 `--save-dev`與`--save`

3.2 css-loader 和 style-loader

前端-vue框架學(xué)習(xí)筆記(一)-項目構(gòu)建

目錄

1.學(xué)習(xí)文檔

1.1 介紹

1.2 vue語法介紹

1.3 vue項目構(gòu)建學(xué)習(xí)文檔

2.構(gòu)建項目

2.1 vue-cli腳手架構(gòu)建項目

2.2 自定義構(gòu)建項目

2.2.1 文件/文件夾創(chuàng)建

2.2.2 webpack.config.js文件配置和相關(guān)依賴包安裝

2.2.3 入口文件創(chuàng)建、vue組件編寫與路由配置

3 拓展

3.1 --save-dev與--save

3.2 css-loader 和 style-loader

1.學(xué)習(xí)文檔

1.1 介紹：

1.2 vue語法介紹：

1.3 vue項目構(gòu)建學(xué)習(xí)文檔

2.構(gòu)建項目

2.1 vue-cli腳手架構(gòu)建項目

2.2 自定義構(gòu)建項目

2.2.1 文件/文件夾創(chuàng)建

2.2.2 webpack.config.js文件配置和相關(guān)依賴包安裝

2.2.3 入口文件創(chuàng)建限匣、vue組件編寫與路由配置

3 拓展

3.1 --save-dev與--save

3.2 css-loader 和 style-loader

3.1 `--save-dev`與`--save`

3.1 `--save-dev`與`--save`