一、安装脚手架
1.安装@vue/cli
node 版本要求: >8.9,推荐使用8.11.0 +。
关于旧版本:
如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉。
运行:npm uninstall vue-cli -g
或 yarn global remove vue-cli
。
安装:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后,可以在命令行中访问vue命令。
检查版本是否正确:
vue --version
2.快速原型开发
安装:
npm install -g @vue/cli-service-global
# OR
yarn global add @vue/cli-service-global
3.安装vscode插件
名字:Vetur。用于高亮.vue文件代码
//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>