摘要：基礎(chǔ)與項(xiàng)目構(gòu)建入門(mén)最近兩年，同學(xué)們出去討論前端的框架，相信大家對(duì)也并不陌生，并稱(chēng)前端三大框架各有各的特色，在這里說(shuō)一下，我們非常有必要學(xué)習(xí)這些東西，不管是求職面試，還是公司需要什么是讀音，類(lèi)似于是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。

最近兩年，同學(xué)們出去討論前端的框架，相信大家對(duì)vue也并不陌生，vue、angular、React并稱(chēng)前端三大框架！各有各的特色，在這里說(shuō)一下，我們非常有必要學(xué)習(xí)這些東西，不管是求職面試，還是公司需要！

Vue.js（讀音 /vju?/，類(lèi)似于 view） 是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)！

首先創(chuàng)建一個(gè)HTML，我們加入下邊兩行代碼

//引入vue




  {{ message }}


//掛載vue
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

最后瀏覽器會(huì)打印出Hello Vue！

今天教大家的不是這個(gè)，是怎樣使用vue-cli和如何依據(jù)cli，自己搭建我們自己需要的項(xiàng)目

npm install -g vue-cli

vue init webpack my-project

cd my-project

npm install

npm run dev

輸入npm run dev之后會(huì)進(jìn)入一個(gè)歡迎頁(yè)面！

只需要5步我們的vue項(xiàng)目就構(gòu)建完畢了，
大家看一下構(gòu)建出來(lái)的項(xiàng)目結(jié)構(gòu)！

├── 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)格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首頁(yè)模板
├── package.json // 包管理文件
└── README.md // 描述文件

是不是特別的復(fù)雜，下邊我們依據(jù)項(xiàng)目目錄搭建我們需要的架構(gòu)！

我們分析需求我們需要這些東西

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

package.json文件創(chuàng)建

webpack配置文件創(chuàng)建

入口文件創(chuàng)建

vue組件編寫(xiě)

路由配置

下邊我們根據(jù)結(jié)構(gòu)拆分為下邊這樣，大家建立文件夾，一一建立

{
  "name": "vue2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
  },
  "dependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.29.0",
    "install": "^0.10.1",
    "npm": "^5.3.0",
    "vue": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

npm install 

初始化我們的項(xiàng)目，會(huì)給你安裝一個(gè)npm包！

module.exports = {
    ...

    module: {    
        rules: [
            {
                test: /.vue$/,
                loader: "vue-loader",
            }，
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
        ]
    },

    ...

}

// entry.js
import { app } from "./app.js"

app.$mount("#app")

// app.js
import Vue from "vue"
import App from "./App.vue"
import router from "./router"

const app = new Vue({
    router,
    ...App
})

export { app, router }

我們創(chuàng)建一個(gè)最簡(jiǎn)單的index.vue項(xiàng)目，我們之前已經(jīng)創(chuàng)建好了

同時(shí)我們需要編寫(xiě)最外層父組件App.vue，一般像下面這樣，主要嵌套一層router-view來(lái)動(dòng)態(tài)展示不同路由下的內(nèi)容:

import Vue from "vue" // 引入vue
import Router from "vue-router"  // 引入路由

Vue.use(Router) // 注冊(cè)路由

import Index from "../views/index.vue"  // 引入我們剛剛編寫(xiě)的簡(jiǎn)單的組件

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

npm install webpack-dev-server --save-dev

"scripts": {
    "dev": "webpack-dev-server",
    "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
}

啟動(dòng)webpack-dev-server，你會(huì)看到hello world!這幾個(gè)大字，這樣大家就可以進(jìn)行自己的項(xiàng)目編寫(xiě)了！