Vue project environment setup

Vue-cli3.0 scaffolding construction project

1. Installation node. Js

Liverpoolfc.tv: nodejs.org/en/

2. Install VUE-CLI 3.0

npm install -g @vue/cli
Copy the code

Check the version after the installation: vue -v (uppercase V)

3. Create projects

Go to the directory where you want to create the project (WeChat: Project name)

vue create project-name
Copy the code

Default: Use the default configuration

Manually select features is a user-defined configuration

4. Select Custom configuration

Space bar Toggles the selected state

TypeScript: A superset of JS provided by Microsoft

Progressive Web App (PWA) Support: Progressive Web applications.

The Router: routing

Vuex:Vuex is a state management mode + library for vue.js applications

CSS pre-processors :Sass/Less preprocessors

Linter/Formatter: Code style check

Unit Testing: Support for Unit Testing

E2E Testing: Supports E2E Testing

5. Select CSS precompilation, which I chose less

6. Syntax checking tool, here I choose ESLint + Standard Config

7. Select syntax check mode, here I’m going to select Lint on Save.

8. I choose to save the configuration file in an independent folder

9. Record the configuration: If you type N, do not record the configuration. If you type Y, you need to enter the name to save the configuration

10. After confirming, wait for the dependency module to be downloaded

11. Start the project

cdProject-name // Go to the root directory NPM run serve // Run the projectCopy the code

Delete unneeded structures:

1. Delete the files of the SRC /cpomponents project

2. Delete the pictures under Assets

3. Delete the favicon.icon under Pubilc

Temporary page modifications:

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>

Copy the code

src/views/Home.vue:

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

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

};
</script>

Copy the code

12. Asynchronous request library axios.js

1. Installation:

Install Axios in the wechat project

npm install --save axios
Copy the code
2. Introduction:

1. Modify the SRC/main. Js

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

Vue.config.productionTip = false

// 2. Bind axios to the vue instance property $axios
Vue.prototype.$axios = axios

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

Copy the code
3. Test introduction
Modify thesrc/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>

Copy the code
Modify the 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>Copy the code

13. Introduce iconfont

Website: www.iconfont.cn/

1. Download the font icon you added

2. Place the downloaded font icon in the iconFont folder under SRC/Assets (create it yourself)

3. Test the modification

Introduced in the SRC/main. Js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Introduce the iconfont style
import './assets/iconfont/iconfont.css'

// 1. Introduce axios
import axios from 'axios'

Vue.config.productionTip = false

// 2. Bind axios to the vue instance property $axios
Vue.prototype.$axios = axios

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


Copy the code

In the SRC/views/Home. Vue modification

<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>Copy the code
Effect of 4.

14. Introducing Vant (UI Framework)

1. Install the vant
npm i vant -S
Copy the code
2. Import components

Installing a plug-in

npm i babel-plugin-import -D
Copy the code

In the Babel. Config. Js configuration

module.exports = {
  presets: [
    '@vue/app'].plugins: [['import', {
      libraryName: 'vant'.libraryDirectory: 'es'.style: true
    }, 'vant']]}Copy the code

In the SRC/main. Js configuration

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Introduce the iconfont style
import './assets/iconfont/iconfont.css'
// Introduce styles for Vant UI components
import 'vant/lib/index.css'
// 1. Introduce axios
import axios from 'axios'

Vue.config.productionTip = false

// 2. Bind axios to the vue instance property $axios
Vue.prototype.$axios = axios

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

Copy the code
3. Test the effect

src/views/Home.vue

<template>
  <div class="home">
    home
    <div class="iconfont icon-iconfonthome0"></div>
    <van-button type="primary">The main button</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>

Copy the code

15. Rem adaptation

Styles in Vant are used by defaultpxAs a unit, if requiredremUnit: You are advised to use the following tools:

1. Postcss – PxtoREM is a PostCSS plugin that converts units to REM

npm install postcss-pxtorem --save-dev
Copy the code

2. Lib-flexible Set rem reference value

npm i lib-flexible --save
Copy the code
Configure it in postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android > = 4.0'.'iOS >= 7']},'postcss-pxtorem': {
      rootValue: 37.5.propList: [The '*']}}}Copy the code
Import the downloaded flexible into main.js
/ / into the lib - flexible
import 'lib-flexible/flexible'
Copy the code