使用webpack模板

vue init webpack my-project

本文示例運行於vue-cli(v2.8.1),命令列提示如下：

? Project name (my-project) //請輸入專案名稱，回車預設

? Project description (A Vue.js project) //請輸入專案描述，回車預設

? Author xsl <398818817@qq.com> //請輸入作者名，回車預設

? Vue build //請選擇構建模式，請直接回車選擇第一條

> Runtime + Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific

HTML) are ONLY allowed in .vue files - render functions are required elsewhere

? Install vue-router? Yes //是否安裝vue-router,回車

? Use ESLint to lint your code? Yes //是否安裝ESLint程式碼檢查器，回車

//個人比較偏愛airbnb的編碼規範，此處選擇第二項

none (configure it yourself)

? Setup unit tests with Karma + Mocha? Yes //單元測試，請按需選擇

? Setup e2e tests with Nightwatch? Yes //端到端測試，請按需選擇

如果對於eslint報錯並不明白的，可以參考eslint官方文件提供ESLint程式碼檢查規則索引;

安裝依賴 :  cnpm  install 

1.Vue引入jquery

使用命令cnpm install jquery --save-dev 安裝jquery。

--save-dev表示自動新增配置依賴到package.json檔案的devDependencies中,開發環境

如果只加--save表示自動新增配置依賴到package.json檔案的dependencies中，生產環境

在webpack.base.conf.js中新增如下內容：

var webpack = require('webpack')

和

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery"

})

],

在main.js中配置全域性配置

import $ from 'jquery'

2.Vue引入bootstrap

安裝bootstrap，使用命令npm install bootstrap --save-dev

在main.js中新增如下內容：

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min'

3.引入Less

1.安裝less和less-loader  : 命令：cnpm install less less-loader --save

2.配置less: 路徑：build---webpack.base.conf.js新增

{

test: /\.less$/,

loader: 'style-loader!css-loader!less-loader'

}

4.引入swiper

    cnpm install swiper --save-dev

在mins中引入

import 'swiper/dist/css/swiper.css';

外掛在哪寫在哪引入

import Swiper from 'swiper';

5,Mint UI：安裝

cnpm i mint-ui --save

cnpm install --save moment //時間格式化外掛安裝

main.js中寫入:

import Mint from 'mint-ui';

Vue.use(Mint);

import 'mint-ui/lib/style.css';

6,Element：安裝

cnpm i element-ui -S

cnpm install babel-plugin-component -D

main.js中寫

import ElementUI from 'element-ui'

import '../node_modules/element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

7,vue-resource安裝

cnpm install vue-resource --save

在main.js中加入

import VueResource from 'vue-resource'

Vue.use(VueResource)

8,vuex

cnpm install vuex --save

在main.js中加入

import Vuex from 'vuex'

import store from './vuex/store'

Vue.use(Vuex)

VUE例項中加入store,

清除快取cnpm cache clean --force

9,vue-axios

cnpm install --save axios vue-axios

main.js中寫

import Vue from 'vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)