vue基礎與項目構建入門

vue基礎與項目構建入門

最近兩年，同窗們出去討論前端的框架，相信你們對vue也並不陌生，vue、angular、React並稱前端三大框架！各有各的特點，在這裏說一下，咱們很是有必要學習這些東西，無論是求職面試，仍是公司須要！

什麼是vue

Vue.js（讀音 /vjuː/，相似於 view） 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供驅動！

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

//引入vue
<script src="https://unpkg.com/vue"></script>


<div id="app">
  {{ message }}
</div>

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

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

今天教你們的不是這個，是怎樣使用vue-cli和如何依據cli，本身搭建咱們本身須要的項目

vue-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組件編寫
• 路由配置

下邊咱們根據結構拆分爲下邊這樣，你們創建文件夾，一一創建

文件夾建立

package.json文件

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

webpack配置文件

module.exports = {
    ...

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

    ...

}

配置項目入口文件entry.js，

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

vue組件編寫

咱們建立一個最簡單的index.vue項目，咱們以前已經建立好了

<template>
    <h1>hello world!</h1>
</template>

<script>
//能夠寫vue語法
</script>

<style>
//能夠寫css
</style>

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

<template>
    <router-view></router-view>
</template>

<script>

</script>

<style>

</style>

配置一下咱們的路由

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

webpack-dev-server

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

在package.json配置啓動命令

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

啓動webpack-dev-server，你會看到hello world!這幾個大字，這樣你們就能夠進行本身的項目編寫了！