從零開始搭建一個項目-前端框架（vue）

基礎框架：Vue

UI框架：iview

樣式：less

用到模塊：vuex vue-router

Ajax：anios

 

第一步 安裝淘寶鏡像代替npm（可省略，如果省略了，后面所有cnpm改為npm）

　　npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步 創建Vue項目

　　按照https://vuejs-templates.github.io/webpack/中寫的一步步執行

　　1、 npm install -g vue-cli

　　2、vue init webpack my-project

　　　　my-project：項目所在文件夾名稱

　　　　執行后會出現：

　　　　　　（1）Project name 輸入你的項目名稱

　　　　　　（1）Project description 輸入項目描述

　　　　　　（1）Author xxxxx <[e-mail]>回車

　　　　　　（1）Install vue-router? (Y/n)　　是否安裝vue-router根據個人情況填寫是否安裝

　　　　　　（1）Use ESLint to lint your code? (Y/n)　　是否安裝ESLint根據個人情況填寫是否安裝

　　　　　　（1）Set up unit tests? (Y/n)　　是否安裝單元測試根據個人情況填寫是否安裝

　　　　　　（1）Setup e2e tests with Nightwatch? (Y/n)　　是否要安裝端對端測試根據個人情況填寫是否安裝

　　3、cd my-project

　　4、npm install

　　5、npm run dev

　　好了，到這一步，基本的vue項目已經好了。ps：如果想讓項目啟動后自動打開瀏覽器，在config下的index.js文件中找到autoOpenBrowser,把它的值改為true即可。

第三步 安裝less

　　cnpm i less --save

第四部 安裝less-loader

　　 cnpm i less-loader --save

第五步 安裝iview

　　　　找到iview官網，里面有安裝教程https://www.iviewui.com/docs/guide/install 

　　　cnpm install iview --save

 

第六步 安裝iview-loader

　　cnpm install iview-loader --save-dev

第七步 安裝axios 

　　　cnpm install axios --save

第八步 安裝vuex

　　　　https://vuex.vuejs.org/zh/installation.html文檔中有安裝步驟

　　   cnpm install vuex --save

　　至此，依賴庫什么都裝的差不多了，裝好了之后並未結束，還需要引入到項目中

第九步 引入

　　（1）引入vuex　　參考官方文檔

　　（1）引入iview　　參考官方文檔　　　　

　　　　import Vuex from 'vuex'

　　　　// 引入iview
　　　　import iView from 'iview';
　　　　import 'iview/dist/styles/iview.css';

　　　　Vue.use(iView);
　　　　Vue.use(Vuex)

　　　

　　配置 webpack，改寫平時 vue-loader 的配置，形如：　

　　https://www.iviewui.com/docs/guide/iview-loader　　　

　　{
　　　　test: /\.vue$/,
　　　　loader: 'vue-loader',
　　　　options: vueLoaderConfig
　　},

　　改寫為：

　　{
　　　　test: /\.vue$/,
　　　　use: [
　　　　　　{
　　　　　　　　loader: 'vue-loader',
　　　　　　　　options: {}
　　　　　　},
　　　　　　{
　　　　　　　　loader: 'iview-loader',
　　　　　　　　options: {
　　　　　　　　　　prefix: false
　　　　　　　　}
　　　　　　}
　　　　]
　　},

　　改寫原因：用<Switch>標簽寫了個demo測試iview，發現未生效，文檔說如果沒有引入iview-loader，要用<i-Switch>代替<Switch>標簽。為了不加i-，引入了iview-loader，並對其進行以上配置。

　　引入結束也不算結束，我們需要測試下我們引入的這些到底有沒有生效，所以就簡單寫個demo測試下

　　1、測試Vuex 在main.js里面添加store: Vuex,

　　　　

　　2、寫測試代碼

　　　　

    <div class="test-iview">
      <Switch size="large" />
      <Switch />
      <Switch size="small" />
    </div>
    <div class="test-less">
      <p class="less-p">測試less</p>
    </div>

 created () {
    console.log(this.$store, '測試store vuex')
  }

<style lang="less" scoped>
    .test-less {
      .less-p {
        color: blue;
      }
    }
</style>

　　

　　

以上工作做完了，這個項目也就算搭好啦，至於別的東西，與業務場景相關度比較大。自由發揮吧。