文章介绍了如何使用VueCLI命令行工具快速搭建Vue项目，包括安装CLI、创建项目、安装依赖及运行项目。同时，也详细阐述了手动创建Vue项目的过程，涉及创建HTML文件，引入Vue的CDN链接以及创建Vue实例。
- 使用Vue CLI创建
Vue CLI是Vue官方提供的一个命令行工具，可以帮助我们快速搭建和管理Vue项目。以下是使用Vue CLI创建Vue项目的步骤：
1.1 安装Vue CLI
在终端或命令行中输入以下命令，安装Vue CLI：
npm install -g @vue/cli
1.2 创建项目
在终端或命令行中输入以下命令，使用Vue CLI创建Vue项目：
vue create my-project
其中，my-project是项目名称，您可以根据需要进行修改。
1.3 安装依赖
进入项目目录，在终端或命令行中输入以下命令，安装项目依赖：
cd my-project npm install
1.4 运行项目
在终端或命令行中输入以下命令，启动Vue项目：
npm run serve
至此，您已经成功创建并启动了一个Vue项目。
- 手动创建
除了使用Vue CLI，我们还可以手动创建Vue项目。以下是手动创建Vue项目的步骤：
2.1 创建HTML文件
在任意目录下创建一个名为index.html的HTML文件，其中引入Vue的CDN链接：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue App</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> </html>
2.2 创建Vue实例
在index.html文件中添加Vue实例：
<script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
2.3 运行项目
在浏览器中打开index.html文件，即可看到Vue实例输出的内容。
以上就是创建Vue项目的两种方式，您可以根据个人需求和喜好进行选择。使用Vue CLI创建项目可以更快速地搭建和管理项目，而手动创建项目则可以更好地了解和掌握Vue的基础知识。
扫一扫
2098
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
