搭建第一个Vue工程
搭建第一个Vue工程
创建项目的方式有多种,这里主要介绍了3种方法。分别是通过UI搭建(UI是vue3.0以上的脚手架才支持的),通过vue create创建
,通过vue init
创建(这种方式我们后面再做介绍)。
可视化UI创建项目
vue3.0以上的脚手架推出了UI界面。因此可以通过该UI来创建项目。
- 在终端(命令行)输入
vue ui
启动UI。
命令行会输出以下内容,同时会自动打开浏览器,
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
如果浏览器没有自动打开,那么手动打开浏览器,在地址栏中输入http://localhost:8000
即可打开。浏览器中的画面如图:
-
创建项目。
点击创建
,然后点击在此创建新项目
,然后输入项目文件夹
,包管理器选择yarn,其他默认即可,然后点下一步即可。在预设界面,选择默认即可,然后点击创建项目,此时会自动拉取项目相关的所有文件,并且会自动安装依赖。 -
运行项目
运行项目的方式有2种,本质上其实只有一种。- 通过图形界面运行
- 通过终端运行
打开终端
cd ./my-project
,然后 输入yarn serve
即可运行。
终端创建项目
这种方式是比较常用的方式,虽然没有界面,但是简洁高效。
- 创建项目
打开终端,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,如果不是请用键盘上的上下方向键
选择,然后回车,等待自动安装。
- 运行项目
打开终端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/
即可查看:
介绍一下vue的项目结构
在开始介绍之前,我推荐大家使用WebStorm进行开发。后面所有的讲解都会使用WebStorm。
现在我们用WebStorm打开my-project,你看到的项目结构如图:
- 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项目,我们不需要每次修改都要手动刷新页面,框架会自动刷新,部分修改需要手动刷新。