Vue3.0 infrastructure

[toc]

Basic environment construction

Nodejs version

X must be in Node.js8.9 or later (8.11.0+ recommended). Click here to install Node. Due to the author’s current long term support edition: 12.18.3.

Query your Node version:

node -v
Copy the code

Install the vue – cli

npm install -g @vue/cli / / install cli3. X
vue --version // Check whether the version is 3.x
// Speed up the download using CNPM
cnpm install -g @vue/cli
Copy the code

Start the first VUE3 project

1. Command line:

vue create my_cli3_20200819
Copy the code

2. Select a template

Default [vue2](default configuration)vue2, default[vue3](default configuration)vue3 and Manually select features(manual configuration). The default configurations are only Babel and ESLint, where manual configuration is optional.

3. Select the configuration

According to your project needs to select the configuration, the space bar is selected and unselected, the A key is selected all

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
  // check the functionality required for the project :(press 
      
        to select, 
        to toggle all, < I > to reverse selection)
      
  >( ) Choose Vue version                         // Select the vue version
   ( ) TypeScript                                 Supports TypeScript source writing
   ( ) Progressive Web App (PWA) Support          / / PWA support
   ( ) Router                                     / / support vue - the router
   ( ) Vuex                                       / / support vuex
   ( ) CSS Pre-processors                         // Supports CSS preprocessors.
   ( ) Linter / Formatter                         // Support code style checking and formatting.
   ( ) Unit Testing                               // Unit testing is supported.
   ( ) E2E Testing  

Copy the code

4. Select historical mode

5. Select the CSS preprocessor:

  • If you select the Css preprocessor option, it will let you select this (Node sass).

6. Select Eslint code validation rules:

  • Select Save to report the error

  1. Select additional Lint features:

8. Where to put configuration files such as Babel, postCSS, esLint:

  1. Save the preset

Save this as a preset for future projects? (Y/n) // Preset to use // After Save, you will write a configuration name: Save Preset as: name // Then you can preset to use your configuration next timeCopy the code

11. Download dependencies

12. Questions about downloading Node-saas:

  • Error content:
Always download a "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-72_binding.node" : a timeoutCopy the code

  • Solution:

    Update solution article:

    • Under Windows solve node – sass installation failure (always download “https://github.com/sass/node-sass/rele)

    • Github.com/sass/node-s…

    // Download win32-x64-72_binding.node HTTP: / / https://github.com/sass/node-sass/releases/ / / set a variable set SASS_BINARY_PATH=D:\Download\Chrome_Down\win32-x64-72_bindingCopy the code

    13. Run projects

    cd my_cli3_20200819
npm run serve
Copy the code

UI creation project

vue ui
Copy the code

I met the vue

1. Add the vue – next

vue add vue-next
Copy the code

2. Vue features

1. Feature description

Note Currently, VUE plans to support Internet Explorer 11+

2. Composition API Experience

​ Options API

<template>
    <div>
        <span>{{count}}</span>
        <p @click="plus">+</p>
        <p @click="min">-</p>
    </div>
</template>

<script>
    export default {
        name:'Counter'.data() {
            return {
                count:0}},methods: {
            plus () {
                this.count++
            },
            min () {
                this.count--
            }
        }
    }
</script>

<style scoped>

</style>
Copy the code

​ Composition API

<template>
    <div>
        <span>{{state.count}}</span>
        <p @click="plus">+</p>
        <p @click="min">-</p>
    </div>
</template>

<script>
    import { reactive } from 'vue'
    export default {
        name:'Counter_V3',
        setup () {
            const state = reactive({
                count: 0,})function plus(){
                state.count++
            }

            function min(){
                state.count--
            }
        
            return {
                state,
                plus,
                min
            }
        }
    }
</script>

<style scoped>

</style>
Copy the code

The resources

  • JS++2020 new course: get straight to the basics of Vue3.0
  • A super detailed vuE-CLI3.0 tutorial [come and try it!]