使用构建方式创建Vue.js项目并运行。
时间: 2024-09-23 09:16:43 浏览: 62
创建Vue.js项目的常见构建方式有多种,以下是通过官方推荐的vue-cli(Vue CLI)工具快速搭建和运行项目的基本步骤:
1. **安装Vue CLI**:
首先需要确保已全局安装Node.js,然后打开终端(Windows用户可以使用命令提示符),运行以下命令来安装`vue-cli`:
```
npm install -g @vue/cli
```
2. **创建新项目**:
使用`vue create`命令创建一个新的Vue.js项目,例如命名为`my-project`:
```
vue create my-project
```
这会生成一个包含基本配置的新目录。
3. **进入项目文件夹**:
```
cd my-project
```
4. **启动项目**:
在项目根目录下,运行`npm run serve` 或者 `yarn serve` (取决于你的包管理器),这将启动本地开发服务器,并提供一个URL供你访问你的Vue应用。
5. **查看应用**:
打开浏览器,访问 `http://localhost:8080`(默认端口,可能会根据你的设置有所不同),你应该能看到一个新的Vue应用程序正在运行。
6. **修改源码和实时更新**:
直接编辑src下的文件,更改完成后刷新浏览器,Vue CLI会自动热加载改变的部分,无需重启服务。
阅读全文