vue-cli3.0 腳手架搭建項目(vant)

vue項目環境的搭建

一.vue-cli3.0腳手架搭建項目

1.安裝node.js

​ 官網:nodejs.org/en/

2.安裝vue-cli 3.0

npm install -g @vue/cli
複製代碼

安裝成功後查看版本：vue -V(大寫的V)

3.建立項目

到你想建立項目的目錄下建立項目(WeChat:項目名稱)

vue create project-name
複製代碼

default 是 使用默認配置

Manually select features 是 是自定義配置

4.選擇自定義配置

空格鍵切換選中狀態

Babel:支持es6語法轉換

TypeScript:微軟提供的js超集

Progressive Web App (PWA) Support:漸進式的網頁應用程序。

Router:路由

Vuex:Vuex是Vue.js應用程序的狀態管理模式+庫

CSS Pre-processors:Sass/Less預處理器

Linter / Formatter:代碼風格檢查

Unit Testing:支持單元測試

E2E Testing:支持E2E測試

5.選擇css預編譯，這裏我選擇less

6.語法檢測工具，這裏我選擇ESLint + Standard config

7.選擇語法檢查方式，這裏我選擇保存就檢測(Lint on save)

8.配置文件的存放位置，我選擇放在獨立文件夾

9.是否記錄配置：鍵入N不記錄，若是鍵入Y須要輸入保存名字

10.肯定後，等待下載依賴模塊

11.啓動項目

cd project-name // 進入項目根目錄
npm run serve // 運行項目
複製代碼

刪除不須要的結構：

1.刪除src/cpomponents項目的文件

2.刪除assets下面的圖片

3.刪除pubilc下面的favicon.icon

頁面暫時的修改：

src/App.vue:

<template>
  <div id="app">
    <home></home>
  </div>
</template>
<script>
import home from "./views/Home";
export default {
  components: {
    home
  }
};
</script>
<style lang="less">
</style>

複製代碼

src/views/Home.vue:

<template>
  <div class="home">home</div>
</template>

<script>
export default {
  name: "home",

};
</script>

複製代碼

12.異步請求庫 axios.js

1.安裝：

在wechat項目中安裝 Axios

npm install --save axios
複製代碼

2.引入：

1.修改src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.引入axios
import axios from 'axios'

Vue.config.productionTip = false

// 2.把axios綁定到vue實例的屬性$axios
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

複製代碼

3.測試引入

修改src/App.vue

<template>
  <div id="app">
    <home></home>
  </div>
</template>
<script>
import home from "./views/Home";
export default {
  components: {
    home
  }
};
</script>
<style lang="less">
</style>

複製代碼

修改src/views/Home.vue

<template>
  <div class="home">home</div>
</template>

<script>
export default {
  name: "home",
  mounted() {
    this.$axios
      .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
      .then(res => {
        console.log(res);
        
      });
  }
};
</script>

複製代碼

13.引入iconfont字體圖標

官網：www.iconfont.cn/

1.把你添加的字體圖標下載下來

2.把下載下來的字體圖標放在src/assets下面的iconfont文件夾（本身新建）裏面

3.測試修改

在src/main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入iconfont的樣式
import './assets/iconfont/iconfont.css'

// 1.引入axios
import axios from 'axios'

Vue.config.productionTip = false

// 2.把axios綁定到vue實例的屬性$axios
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


複製代碼

在src/views/Home.vue修改

<template>
  <div class="home">home
    <div class="iconfont icon-iconfonthome0"></div>
  </div>
</template>

<script>
export default {
  name: "home",
  mounted() {
    this.$axios
      .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
      .then(res => {
        console.log(res);
        
      });
  }
};
</script>

複製代碼

4.效果

14.引入vant(ui框架)

1.安裝vant

npm i vant -S
複製代碼

2.引入組件

安裝插件

npm i babel-plugin-import -D
複製代碼

在babel.config.js配置

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}
複製代碼

在src/main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入iconfont的樣式
import './assets/iconfont/iconfont.css'
// 引入Vant UI組件的樣式
import 'vant/lib/index.css'
// 1.引入axios
import axios from 'axios'

Vue.config.productionTip = false

// 2.把axios綁定到vue實例的屬性$axios
Vue.prototype.$axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

複製代碼

3.測試效果

src/views/Home.vue

<template>
  <div class="home"> home <div class="iconfont icon-iconfonthome0"></div> <van-button type="primary">主要按鈕</van-button> </div> </template>

<script>
import Vue from "vue";
import { Button } from "vant";
Vue.use(Button);
export default {
  name: "home",
  mounted() {
    this.$axios
      .get("https://www.easy-mock.com/mock/5d395ce7fa347e75e540dbeb/zl/Update")
      .then(res => {
        console.log(res);
      });
  }
};
</script>
<style lang="less" scoped>
</style>

複製代碼

15.Rem適配

Vant 中的樣式默認使用px做爲單位，若是須要使用rem單位，推薦使用如下兩個工具：

1.postcss-pxtorem是一款postcss插件，能夠將單位轉換爲rem

npm install postcss-pxtorem --save-dev
複製代碼

2.lib-flexible用於設置 rem 基準值

npm i lib-flexible --save
複製代碼

在postcss.config.js裏面配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}
複製代碼

將下載好的flexible引入到main.js

// 引入lib-flexible
import 'lib-flexible/flexible'
複製代碼