旅游门户网站源码怎么做的厦门百度seo排名
环境准备
create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。
而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS（和Java的依赖概念一样）
NodeJS
在官网找到所需安装版本，安装在没有中文，没有空格 的目录下，NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v。
使用 管理员身份 运行命令行，在命令行中，执行如下指令来配置全局路径
npm config set prefix "D:\develop\NodeJS"切换为淘宝镜像，加速下载
npm config set registry https://registry.npmmirror.com在开发前端的项目中，可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。
创建Vue项目
使用npm create vue@版本 来创建Vue项目（vue@latest就是创建vue最新版）。
例如：
l
利用VsCode来打开它。
项目的启动
方式一：在命令行中执行命令npm run dev来启动Vue项目
方式二：在VsCode中启动
步骤1：首先下载依赖 npm run dev
步骤2：
步骤3： 看到这个界面即可成功
项目的结构
1.整个项目只有一个以html结尾的文件
2.package.json记录了用了哪些依赖（依赖版本的最低要求），最终的依赖都会记录在package-lock.json里面（类似于Java的pom文件，项目迁移也是以他为主），下载的依赖都会在node_modules里面（类似于Java的maven仓库，前端项目迁移的时候不会考虑这个文件，这个文件太大了，项目迁移到手后需要用npm install来下载所需依赖，也就是这个文件）
3.vite.config.js记录了vue的配置信息，如端口号等
4.README.md是说明文档，让别人可以快速上手
5.public文件一般存放图片，logo等
6.src文件存放目录（以后写代码的文件）
项目的访问流程
1.启动项目时访问index.html文件
2.根据路径来到main.js文件
3.最后的落脚点在App.vue来修改界面
API风格
-
Vue的组件有两种不同的风格：组合式API 和 选项式API
-
组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量function increment(){ //声明函数count.value++;
}onMounted(() => { //声明钩子函数console.log('Vue Mounted....');
})
</script><template><input type="button" @click="increment"> Api Demo1 Count : {{ count }}
</template><style scoped></style>-
选项式API
选项式API：可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。
<script>
export default{data() {return {count: 0}},methods: {increment: function(){this.count++}},mounted() {console.log('vue mounted.....');}
}
</script><template><input type="button" @click="increment">Api Demo1 Count : {{ count }}
</template><style scoped></style>