安装Vue CLI_yarn_如何在Vue中使用路由

一、安装Vue CLI

你得有个Node.js和npm（Node包管理器）。检查一下你电脑上有没有，用这个命令行看看：

node -v

npm -v

有了它们之后，咱们就可以用npm全局安装Vue CLI了：

npm install -g @vue/cli

或者用yarn：

yarn global add @vue/cli

安装完之后，再用这个命令检查一下Vue CLI是否安装成功：

vue --version

二、新建Vue项目

安装好Vue CLI后，新建一个Vue项目就像搭积木一样简单：

vue create my-project

这时候，Vue CLI会问你一些问题，比如项目的名称、预设配置等。你可以直接按回车选择默认设置。

然后，你需要在命令行中进入新项目的文件夹：

cd my-project

三、运行开发服务器

进入项目目录后，咱们就可以启动开发服务器了：

npm run serve

或者用yarn：

yarn serve

服务器启动后，你会在控制台看到一个本地地址，比如 ，把这个地址复制到浏览器里，就能看到你的Vue应用啦！

四、项目结构简介

新建的项目会有一个结构，就像一个文件柜，每个文件夹都有自己的作用：

五、编写第一个Vue组件

了解了项目结构，咱们来写个简单的Vue组件吧：

在 src/components 目录下新建一个文件，叫 MyComponent.vue，内容如下：

<template> <div>Hello, Vue!</div> </template> <script> export default { name: 'MyComponent' } </script> <style scoped> div { color: red; } </style>

然后在 src/App.vue 中引入并使用这个组件：

<template> <div id="app"> <MyComponent></MyComponent> </div> </template> <script> import MyComponent from './components/MyComponent.vue' export default { name: 'App', components: { MyComponent } } </script>

保存文件后，浏览器会自动刷新，你就能看到“Hello, Vue!”了！

六、总结

你已经成功新建了一个Vue项目，还写了一个Vue组件。主要步骤如下：

1. 安装Vue CLI。
2. 使用Vue CLI新建项目。
3. 运行开发服务器。
4. 了解项目结构。
5. 编写第一个Vue组件。

接下来，建议你继续学习Vue的核心概念和特性，比如组件、路由、状态管理等，这样能更好地开发和维护Vue应用。你可以参考Vue官方文档和社区资源，那里有更多的示例和最佳实践。

相关问答FAQs

1. 如何在Vue中创建一个新的Vue实例？

创建Vue实例的步骤如下：

1. 安装Vue.js。
2. 导入Vue并创建一个新的Vue实例。
3. 在HTML文件中使用Vue实例。

2. 如何在Vue中使用组件？

使用组件的步骤如下：

1. 创建组件。
2. 在Vue实例中使用组件。
3. 传递数据给组件。

3. 如何在Vue中使用路由？

使用路由的步骤如下：

1. 安装Vue Router。
2. 创建路由器实例。
3. 配置路由器实例。
4. 在模板中使用路由。