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'
复制代码