vue進階2-構建基礎框架

1、添加CSS預處理器SASS

關於SASS語法的註釋：
lang =「scss」對應於CSS-superset語法（帶大括號和分號）。
lang =「sass」對應於基於縮進的語法。

1.安裝sass的依賴包

npm install sass-loader node-sass --save-dev

2.在build文件夾下的webpack.base.conf.js的rules裏面添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
}

3.在APP.vue組件中使用預處理器，修改<style>標籤上的lang屬性：

<style lang="scss">
      @import "./style/reset.css";
      @import "./style/style.scss";
    </style>

2、添加element-ui

1.安裝element-ui依賴

npm install element-ui --save

2.在main.js中引用

import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)

3.在*.vue中調用組件

<el-button>測試</el-button>

3、添加font-awesome字體圖標庫

根據需求可選擇安裝，引用： <i class="fa fa-user-circle"></i>

npm install font-awesome --save

4、添加axios

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。

1.安裝axios

npm install axios --save

2.在main.js引入axios

import Axios from 'axios'
  Vue.prototype.$axios = Axios

3.簡單運用axios

this.$axios.get('url', {
    params: {
      a: xxx,
    }
  }).then(res => {console.log(res)});
    .catch(err => {console.log(err)});
    
  this.$axios.post('url', {
      a: xxx,
  }).then(res => {console.log(res)});
    .catch(err => {console.log(err)});

5、添加vuex

1.安裝vuex依賴

npm install vuex --save

2.在main.js中引入vuex

import vuex from 'vuex'
 Vue.use(vuex)
 var store = new vuex.Store({
   state: {
     age: 20
   }
 })

3.在實例化Vue對象中加入store對象, this.$store.state.age 就能夠使用了。

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
 })

以上只是爲了方便簡單演示，把store對象寫在main.js裏面，在實際運用中，能夠在src目錄下建一個store文件夾來專門處理vuex

6、完善後目錄結構

添加style（樣式）、store（vuex）、pages（頁面）、images（圖片）、common（公用js）等目錄文件

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要項目配置
│   └── ...
├── src/
│   ├── main.js                 # 應用入口js文件
│   ├── App.vue                 # 主應用程序組件
│   ├── components/             # 公共組件目錄
│   │   └── ...
│   └── store/                  # vuex
│   │   └── ...
│   └── pages/                  # 頁面目錄
│   │   └── ...
│   └── images/                 # 圖片目錄
│   │   └── ...
│   └── style/                  # 樣式目錄
│   │   └── ...
│   └── common/                 # 公共js目錄
│   │   └── ...
│   └── router/                 # 前端路由
│   │   └── ...
│   └── assets/                 # 模塊資源（由webpack處理）
│       └── ...
├── static/                     # 純靜態資源（直接複製）
├── .babelrc                    # babel 配置，es6須要babel編譯
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # 編輯器 配置
├── .gitignore                  # 過濾無需上傳的文件
├── index.html                  # index.html模板
└── package.json                # 構建腳本和依賴關係