vue-cli3.0 脚手架搭建项目(vant)Progressive Web App (PWA) Support:渐进

vue项目环境的搭建

一.vue-cli3.0脚手架搭建项目

1.安装node.js

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'

vue-cli3.0 脚手架搭建项目(vant)