Vue前端+快速入门【详解】
warning:
这篇文章距离上次修改已过192天,其中的内容可能已经有所变动。
在Vue中,可以通过以下步骤快速入门:
- 安装Vue CLI:
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
- 创建一个新的Vue项目:
vue create my-project
- 进入项目文件夹,启动项目:
cd my-project
npm run serve
# 或者
yarn serve
- 编辑项目中的文件,比如
src/App.vue
来修改页面内容。 - 在
src/components
目录下创建一个新的组件,例如HelloWorld.vue
。 - 在
src/App.vue
中导入并注册你的组件,然后使用它。
例子:src/components/HelloWorld.vue
<template>
<div>
<h1>Hello, Vue!</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style>
h1 {
color: #42b983;
}
</style>
src/App.vue
<template>
<div id="app">
<hello-world></hello-world>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
这样,你就创建了一个简单的Vue应用,并且可以在浏览器中看到效果。
评论已关闭