摘要：基礎與項目構建入門最近兩年，同學們出去討論前端的框架，相信大家對也并不陌生，并稱前端三大框架各有各的特色，在這里說一下，我們非常有必要學習這些東西，不管是求職面試，還是公司需要什么是讀音，類似于是一套構建用戶界面的漸進式框架。

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

Vue.js（讀音 /vju?/，類似于 view） 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動！

首先創建一個HTML，我們加入下邊兩行代碼

//引入vue




  {{ message }}


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

最后瀏覽器會打印出Hello Vue！

今天教大家的不是這個，是怎樣使用vue-cli和如何依據cli，自己搭建我們自己需要的項目

npm install -g vue-cli

vue init webpack my-project

cd my-project

npm install

npm run dev

輸入npm run dev之后會進入一個歡迎頁面！

只需要5步我們的vue項目就構建完畢了，
大家看一下構建出來的項目結構！

├── 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 // 環境配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules // npm包文件
├── src // 靜態資源文件
│   ├── assets
│   │    └── logo.png
│   ├── components 
│   │    └── Hello.vue 
│   ├── router
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 編碼風格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首頁模板
├── package.json // 包管理文件
└── README.md // 描述文件

是不是特別的復雜，下邊我們依據項目目錄搭建我們需要的架構！

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

文件/文件夾創建

package.json文件創建

webpack配置文件創建

入口文件創建

vue組件編寫

路由配置

下邊我們根據結構拆分為下邊這樣，大家建立文件夾，一一建立

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

初始化我們的項目，會給你安裝一個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 }

我們創建一個最簡單的index.vue項目，我們之前已經創建好了

同時我們需要編寫最外層父組件App.vue，一般像下面這樣，主要嵌套一層router-view來動態展示不同路由下的內容:

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: "/" 
        }, 
    ]
})

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

啟動webpack-dev-server，你會看到hello world!這幾個大字，這樣大家就可以進行自己的項目編寫了！