VUE项目运行和简单页面开发

前情提要

VUE项目的创建查看这一篇《VUE项目创建》

在vue项目创建完成之后,用idea打开项目文件夹,可以看到有一下几个文件夹

build文件夹是项目构建相关,config是项目启动的时候进行的一些配置,node_modules是依赖库,src是源码。

config

config文件夹下有三个js文件,dev.env.js、index.js、prod.env.js

index.js

当你在terminal中执行npm run dev 时,所有启动配置都是从dev中读取;

当你在terminal中执行npm run build 时,所有启动配置都是从build中读取。

npm run dev到底做了什么?

我们打开package.json这个文件,可以看到有这么一行

接着我们打开webpack.dev.conf.js

在npm run dev的时候会去读dev.env.js中的配置。

在日常开发中,用到dev.env.js和prod.env.js的地方很少,所以我们直接把项目启动起来,看看新增一个页面需要什么样的步骤。

启动项目

在idea下方打开terminal,输入npm run dev

在浏览器中打开http://localhost:8080,展示的页面其实是app.vue

app.vue其实是将router-view的页面指向进行页面的展示,具体页面注册的地方在src/router/index.js

下面我们尝试注册一个demo页面

path就是地址栏地址后面跟的哪个名称,如http://localhost:8080/demo,则这里routes里面的path应该配置成"/demo";

component是这个页面引入的名字,在index.js最上方的import后面跟着的名称,我们这里将demo页面直接新建在了components文件夹下,直接ctrl+s ,页面会自动编译。

在浏览器中打开http://localhost:8080/demo,展示的页面就是demo页面

版权声明:
作者:南京扛把子
链接:https://82os.com/?p=32
来源:秃头秘籍
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>