從零開始搭建一個vue專案

ideagay發表於2018-03-08
Vue

準備工作

環境依賴：Node.js；vue官方腳手架： vue-cli；

具體怎麼安裝nodejs和vue-cli的部分就不再具體說明了，檢視官方文件按步驟執行即可（安裝nodejs會預設安裝npm（包管理工具），vue-cli依賴npm來安裝，注意這個先後關係）。

背景知識

vue.js 核心框架

webpack 模組化打包工具，使用vue-cli初始化專案的時候，我們選擇webpack作為我們的模組打包工具

關於什麼是模組化？推薦閱讀這兩篇文章 JavaScript 模組化入門Ⅰ：理解模組 和 JavaScript 模組化入門Ⅱ：模組打包構建。

開始動手

初始化專案，選擇webpack作為打包工具，專案名是my-project，然後按照提示填寫一些配置，過程中會讓你選擇是否使用vue-router(推薦使用);這些配置最終會寫到專案的package.json中和安裝相應的模組

vue init webpack my-project
複製程式碼

接下來使用自己熟悉的編輯器開啟專案，目錄結構大致是這樣的

從零開始搭建一個vue專案

build和config目錄：webpack打包的相關配置檔案

src目錄：我們最終編寫業務程式碼的地方

static目錄：我也不知道幹嘛用的

package.json

package.json是專案最基礎的配置檔案。可以發現裡面的很多內容，例如name，author，description等就是剛才初始化專案時我們填寫的值；dependencies和devDependencies是專案依賴的包，執行專案之前需要先執行npm install 來安裝專案所依賴的包

npm install複製程式碼

然後我們來重點關注一下scripts

npm 允許在package.json檔案裡面，使用scripts欄位定義指令碼命令。其中dev和start都是啟動本地開發環境的，lint是做語法校驗的，build是打包最終線上程式碼的

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "ideagay <xxxx@163.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {...},
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

複製程式碼


為了統一團隊內的程式碼風格，我們一般會選擇一些語法校驗外掛來實現程式碼風格的統一。這裡我們選擇eslint作為我們的程式碼檢查外掛。首先我們來改一下eslint（語法校驗）的相關配置，開啟根目錄下的.eslintrc.js，在rules下面加一個結尾分號的配置，強制末尾要加分號，養成好習慣；然後把src下面所有檔案裡的程式碼缺少分號的補全，不然編譯會不通過；其他風格根據習慣自己配置吧。

"semi": [
  2,
  "always"
]複製程式碼

執行專案看下效果

開啟命令列工具，在當前目錄下執行以下命令，一切順利的話，會自動開啟在瀏覽器上開啟localhost:8080

# 預設8080埠
npm run dev

# 也可以指定埠
PORT=8090 npm run dev複製程式碼

新增業務程式碼

src目錄是我們主要編寫業務程式碼的地方，可參考以下目錄結構配置

assets  js,css,圖片等資源目錄

components  公共元件目錄

router  vue-router 配置目錄

views  頁面元件目錄

main.js  程式主入口，一般在這裡新增外掛，如toast，loading等，可自己編寫或者使用第三方，如element ui

App.vue  根元件

main.js

import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';

Vue.config.productionTip = false;

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});複製程式碼

路由

往router/index.js裡新增首頁的配置

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/index';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
});複製程式碼

網路請求

網路請求可以使用axios，然後根據業務再進行一些封裝

assets/js/api/ajax.js

import axios from 'axios';
var qs = require('qs');

var instance = axios.create({
   baseURL: 'http://xxx.com/',
   timeout: 20000,
   headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
   }
});

const ajax = (url, params) => {
   return new Promise((resolve, reject) => {
      instance({
         url: url,
         method: 'post',
         data: qs.stringify(params)
      }).then(res => {
         console.log(res);
         if (res.data.success === true) {
            resolve(res.data.data);
         } else {
            throw res;
         }
      }).catch(err => {
         console.error(err);
         reject(err);
      })
   })
};

export default ajax;複製程式碼

import Ajax from '@/assets/js/api/ajax.js';
Ajax(`/tui/search`, {
   'key': this.keyword
}).then(res => {
   console.log(res);
});
複製程式碼

樣式

使用normalize.css重置基礎樣式，消除不同瀏覽器間的差異，在根元件App.vue中引入就好了

<script>
import 'normalize.css';

export default {
   name: 'App'
}
</script>複製程式碼

現在一般業務所需的框架已經基本搭建完成。收工

程式碼地址 github.com/ideagay/vue…


相關文章