1.6.2　运行Vue

如果是通过上述方式一或方式二安装的Vue，则运行Vue可以直接在script标签内部创建一个Vue实例，并将该实例挂载到一个DOM元素上，然后在浏览器中打开该页面，即可运行Vue来实现相应的功能开发。

如果是通过后两种方式安装，要运行Vue项目首先需要新建一个文件夹用于存放项目，然后进入到该文件夹目录里运行vue create <project-name>（其中<project-name>表示项目名称，可自己取名，例如npm-vue-demo），最后进入npm-vue-demo项目目录中，输入“npm run dev”即可运行Vue。

    vue create <project-name>
    cd <project-name>
    npm run serve

然后在浏览器中输入“http://localhost:8080”即可将Vue项目界面展现出来，如图1.13选择Vue 3版本，最终访问地址页面效果如图1.14所示。

图1.13　Vue-cli创建Vue项目

图1.14　Vue-cli运行界面

由于使用Vue 3，因此可结合Vite构建工具来搭建并运行Vue项目，但需注意Vite需要Node.js版本>=12.0.0。在终端输入如下命令然后按照提示操作即可运行Vue项目。

    npm init @vitejs/app
    // 然后运行以下命令启动项目
    npm install
    npm run dev

运行成功后，在浏览器地址栏访问http://localhost:3000/，即可看见Vite构建的Vue项目运行后的界面效果，如图1.15所示。

图1.15　Vite构建Vue项目