Java Web学习条记23——Vue项目简介
Vue项目简介：Vue项目-创建：
下令行：vue create vue-project01
图形化界面：vue ui
在下令行中切换到项目文件夹中，然后执行vue ui下令。
https://img-blog.csdnimg.cn/direct/709ca152aa194fffa4ca40136d780a65.png
https://img-blog.csdnimg.cn/direct/1cea5129ee614ad7bc4543f9d6889c6f.png
https://img-blog.csdnimg.cn/direct/bb54249aa95d41ff898c64e82e7c2ddf.png
https://img-blog.csdnimg.cn/direct/e7d6c44325904714b387e525184a4dc7.png
https://img-blog.csdnimg.cn/direct/c9d1fef3691043e08ce695cb8f965f82.png
只必要路由功能。这个路由功能，开始不是很理解。
https://img-blog.csdnimg.cn/direct/279a7e071bdf492f8a29a29161eaf4e1.png
https://img-blog.csdnimg.cn/direct/3bae8aa6a3794cdaab8d5afc886ca512.png
创建项目部生存预设。
https://img-blog.csdnimg.cn/direct/50e4bc7b97e043db9231aa4fd2208e3f.png
https://img-blog.csdnimg.cn/direct/a4f313dc5b77437fbd19f845fbfbb593.png
https://img-blog.csdnimg.cn/direct/8459e252478a43668908e5897f8e2b99.png
项目就创建好了，生成了好多文件夹。
然后利用VS Code打开文件夹：
文件->打开窗口:
在新窗口中打开文件夹：
https://img-blog.csdnimg.cn/direct/3b5a00c66cae4e4d9723723f584b57ce.png
Vue项目目录结构：
基于Vue脚手架创建出来的工程，有尺度的目录结构，如下：
1）node_modules : 整个项目标依赖包
2）public：存放项目标静态文件
3）src： 存放项目标源代码
4）package.json: 维护基本信息，项目开发所必要的模块，版本信息
https://img-blog.csdnimg.cn/direct/ea19a5403069475b97b8aa197e47d41d.png
5）vue.config.js: 生存vue的配置文件，如：代理、端口的配置等：
https://img-blog.csdnimg.cn/direct/d6079a1bed6143e99203d1b15799f6c6.png
在src目录下：
https://img-blog.csdnimg.cn/direct/8d6ce365764a455292c9f9ce0280259a.png
assets：静态资源
component：可重用的组件
router：路由配置
views：视图组件，页面 （都是.vue末端的文件）
App.vue：入口页面（根组件）
main.js: 入口js文件
我们对目录结构有了一个简单的认识。
Vue项目标启动：
https://img-blog.csdnimg.cn/direct/065c6c10e35444178bc21c8292d9c8de.png
https://img-blog.csdnimg.cn/direct/94061acac7a74e47a0572227f1148aa7.png
https://img-blog.csdnimg.cn/direct/babdd4ec67a246d0a0fce4089367f30b.png
这样就访问到Vue项目。
热部署的功能：
https://img-blog.csdnimg.cn/direct/30a03039ec27484c9161422b4988183f.png
更新App.vue页面中的内容，然后生存，网页的内容发生变革，这就是热部署的功能。
修改端标语的方法：
https://img-blog.csdnimg.cn/direct/e732c77d214f44db9f3bba859ce72aa7.png
将当前的8080端口历程ctrl+c停掉，然后再执行npm run serve下令启动历程：
https://img-blog.csdnimg.cn/direct/0e782f78d4384797933901e013731511.png
可见端口已经改成了7000端口。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]