vue初探
标签： vue初探 Html/CSS博客 51CTO博客
2023-06-30 18:24:12 257浏览
vue初探，文章目录环境搭建工具使用创建Helloworld项目自己新建页面环境搭建vue环境搭建工具使用vscode下载这几个插件可以装一下
文章目录
- 环境搭建
- 工具使用
- 创建Helloworld项目
- 自己新建页面
- 页面分析
- 问题
环境搭建
vue环境搭建
工具使用
vscode下载 这几个插件可以装一下:
创建Helloworld项目
在想创建的目录下打开cmd,执行如下命令,然后一直回车:
vue init webpack vue-demo
目录结构:
通过工具打开,然后打开终端执行命令:
1.使用快捷键： ctrl + · 即可；注意那个点是键盘上 esc 下面的那个；
cnpm install;
cnpm run dev;访问看见vuelogo基本就没啥问题:
自己新建页面
新建个vue文件:First.vue:
笔者在components目录下新增First.vue文件，内容如下:
<template>
<div><h1>{{message}}</h1></div>
</template>
<script>
export default {
name: 'First',
data () {
return {
message: 'welcome'
}
}
}
</script>
<style scoped>
</style>然后在router下index.js文件中加上First文件的路由,对着写一遍基本就很清楚:
然后重启一次,访问
这样简单的已经了解,但是我们还不知道文件的调用关系,重哪开始看呢?仿别人自己将图画了一遍.
页面分析
问题
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
