搭建第一个Vue工程

创建项目的方式有多种，这里主要介绍了3种方法。分别是通过UI搭建（UI是vue3.0以上的脚手架才支持的），通过vue create创建，通过vue init创建（这种方式我们后面再做介绍）。

可视化UI创建项目

vue3.0以上的脚手架推出了UI界面。因此可以通过该UI来创建项目。

  1. 在终端（命令行）输入vue ui启动UI。
    命令行会输出以下内容，同时会自动打开浏览器，
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

如果浏览器没有自动打开，那么手动打开浏览器，在地址栏中输入http://localhost:8000即可打开。浏览器中的画面如图：file

  1. 创建项目。
    点击创建，然后点击在此创建新项目，然后输入项目文件夹，包管理器选择yarn，其他默认即可，然后点下一步即可。在预设界面，选择默认即可，然后点击创建项目，此时会自动拉取项目相关的所有文件，并且会自动安装依赖。

  2. 运行项目
    运行项目的方式有2种，本质上其实只有一种。

    • 通过图形界面运行

    file

    • 通过终端运行

    打开终端cd ./my-project，然后 输入yarn serve即可运行。

终端创建项目

这种方式是比较常用的方式，虽然没有界面，但是简洁高效。

  1. 创建项目
    打开终端，cd Desktop/,这个目录自行选择，然后输入vue create my-project,此刻会显示
Vue CLI v3.2.3
┌───────────────────────────┐
│  Update available: 3.5.1  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

默认已经选择default,回车即可。然后选包管理工具，默认会选择yarn，如果不是请用键盘上的上下方向键选择，然后回车，等待自动安装。

  1. 运行项目
    打开终端cd ./my-project，然后 输入yarn serve即可运行。如果你还是想用UI来启动项目，你可以启动UI然后导入该项目，剩下的和可视化UI创建项目中的运行方式是一样的了。

终端启动成功界面

 DONE  Compiled successfully in 3107ms                                                      08:48:46

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.2:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

浏览器中查看页面

在浏览器中输入http://localhost:8080/即可查看：
file

介绍一下vue的项目结构

在开始介绍之前，我推荐大家使用WebStorm进行开发。后面所有的讲解都会使用WebStorm。
现在我们用WebStorm打开my-project,你看到的项目结构如图：
file

  • node_modules 依赖目录
  • pubic 静态资源的目录，发布后public默认是根目录
    • index.html 项目入口页面
  • src vue源代码目录
    • assets 存放晓得资源
    • components 存放一些组件
    • App.vue 跟组件
    • main.js 应用入口
  • package.json 项目依赖

其他的相关文件暂时可以不用关注，届时需要用到了再去关注，查找资料即可。

发布

发布比较简单，我们在终端cd到项目目录，运行yarn build命令,等运行完成后会生成dist目录，该目录就是我们发布后的产物，只要把dist目录下的文件复制到服务器上就可以运行了。

防坑指南：直接发布的文件只能放到根目录下，放在子目录下会出现问题。如果需要放到子目录下，那么还需要配置一下，在my-project项目根目录下创建一个名为vue.config.js的配置文件，内容如下：

module.exports = {
    baseUrl:'/project'
}

现在我们重新运行项目，发现控制台输出结果变了：

 DONE  Compiled successfully in 1872ms                                                                                                                                    9:49:45 AM

  App running at:
  - Local:   http://localhost:8080/project/ 
  - Network: http://172.20.10.2:8080/project/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

访问的地址后面都加了一个project，现在我们可以部署到服务器根目录下的project文件夹内了。

小结

这样开发vue项目，我们不需要每次修改都要手动刷新页面，框架会自动刷新，部分修改需要手动刷新。