Vue learning-install scaffolding

1. Install scaffolding

1. Install @vue/cli

Node version requirements: >8.9, 8.11.0 + is recommended.

Regarding the old version:
If the old version of vue-cli (1.x or 2.x) has been installed globally before then, you need to uninstall it first.
Run: npm uninstall vue-cli -gor yarn global remove vue-cli.

installation:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

After installation, you can access the vue command on the command line.

Check if the version is correct:

vue --version

2. Rapid prototyping

installation:

npm install -g @vue/cli-service-global
# OR
yarn global add @vue/cli-service-global

3. Install the vscode plugin

Name: Vetur. Used to highlight the .vue file code

//App.vue
<template>
    <div class="app">
        <date-picker />
    </div>
</template>
<script>
import DatePicker from './DatePicker';

export default {
    
    
  components: {
    
    
    DatePicker,
  },  
}
</script>
<style scoped>

</style>
<template>
  <div>
    son
    <p>hahaah is a p</p>
  </div>
</template>

<style scoped>//该样式只对该模板有效
p {
    
    
  background-color: green;
}
</style>

Insert picture description here
Insert picture description here

Guess you like

Origin blog.csdn.net/xun__xing/article/details/108522762