Vue CLI快速创建项目指南安装好如何在Vue项目中添加依赖包

Vue CLI快速创建Vue项目指南

在Vue中创建新项目其实挺简单的，最常见的办法就是用Vue CLI这个工具。下面我会一步步带你走。

一、安装Vue CLI

你需要安装Vue CLI。这很简单，用npm（就是那个Node Package Manager）来装就对了。

npm install -g @vue/cli 

这条命令会把这个工具安装到你的电脑上，以后哪里需要就能用上了。

二、创建新项目

安装好Vue CLI之后，就可以创建新项目了。用这个命令：

vue create my-project 

这里的“my-project”是你想给项目起的名字，你可以自己改。

接下来，Vue CLI会引导你完成一些设置，比如选择预设或者手动添加一些功能，比如路由（Router）、状态管理（Vuex）等等。

选择预设

Vue CLI提供了一些预设，你可以直接选择一个适合你项目的。

• 默认预设（包括Babel和ESLint）
• 手动选择功能

配置功能

如果你选择手动配置，Vue CLI会给你一个列表，你可以根据自己的需要勾选功能。

• Babel
• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors (Sass, Less, etc.)
• Linter / Formatter
• Unit Testing
• E2E Testing

保存预设

选好功能后，Vue CLI会问你是否想保存这些配置作为预设，这样下次创建项目的时候就可以直接用了。

三、配置项目

项目创建好之后，进入项目目录，然后启动开发服务器：

cd my-project npm run serve 

这条命令会启动一个本地服务器，还会自动打开浏览器，展示项目的初始页面。你可以在项目目录下修改代码，浏览器会自动刷新，你就可以实时看到效果了。

四、进一步配置和开发

项目创建完成后，你可以根据需要做进一步的配置和开发。

安装插件

Vue CLI提供了丰富的插件系统，你可以通过以下命令来安装插件：

vue add [plugin-name] 

比如，你想安装Vue Router插件，就输入：

vue add vue-router 

自定义配置

项目根目录下的`vue.config.js`文件允许你自定义Webpack配置，比如修改默认端口、配置代理、自定义Webpack规则等。

开发和部署

在开发过程中，你可以使用以下命令：

• npm run serve：启动开发服务器
• npm run build：打包项目，生成生产环境的静态文件
• npm run lint：运行代码风格检查工具

部署时，只需将目录下的文件上传到服务器即可。

五、总结与建议

使用Vue CLI创建和配置Vue项目非常简单高效。主要步骤包括：

1. 安装Vue CLI
2. 创建新项目并选择功能
3. 配置项目并启动开发服务器

建议根据项目需求选择合适的功能和配置，充分利用Vue CLI的插件系统和自定义配置，提高开发效率和代码质量。

相关问答FAQs

1. 如何使用Vue CLI创建一个新的项目？

确保你已经安装了Node.js和npm，然后运行以下命令：

npm install -g @vue/cli vue create my-project 

选择预设或手动配置，然后进入项目目录并启动开发服务器。

2. 如何在Vue项目中添加依赖包？

使用npm或yarn安装依赖包，或者从官方网站下载源代码并手动引入。

3. 如何在Vue项目中添加全局样式？

有几种方法，比如在App.vue中添加全局样式，或者通过main.js引入全局样式文件。