在此之前你已经安装好了项目
这是没有安装任何工具为前提的最基础教程
(都有工具 简介图 在文章底部)
这里我没有安装任何工具,初始界面就是这样的
开始介绍 public
public (翻译为 公共 的意思)
- 里面存放主页面信息 (单页面应用)
- 单页面应用:
- 我的这个项目只有这一个页面,当我要切换内容的时候,它都是在这一个页面当中进行切换的
- 就好比舞台剧,舞台有第一个节目,有第二个节目,它切换的是人在变,而舞台就是那一个
- 这个文件不到万不得已不要动这个文件
开始介绍 src
补充信息:
开发环境:development
- 就是你写代码的环境
- 会保留很多信息,比如说:异常
生产环境:production
- 将代码进行编译,所运行的环境(放置到服务器所运行的环境)
src就是开发环境
代码都要写在 src 里面
子目录:
- assets:静态资源。
- components:存放组件。
- App.vue:组件(.vue)
- App.vue 里面的内容
- template:模板
- script:组件的逻辑配置信息
- style:样式。
- main.js:入口文件 ⬇⬇⬇
import Vue from 'vue' // 引入VUE核心库
import App from './App.vue' // 引入一个当前目录下的名字为App.vue的组件
Vue.config.productionTip = false; // 是否要在生产环境当中给予提示功能。
new Vue({ // 生成一个VUE实例
render: function (h) { return h(App) }, // 渲染函数,将组件App渲染到挂载的元素上。
}).$mount('#app') //这个 #app 是挂载在 public 主页面上的,你打开index 就会看到 这个元素 id
这里我并没有引入 主页面,他怎么就用了?
有引入,只不过在 webpack里面引入的
也就是说我这个项目一旦运行,我的这个 main.js 就会键入到 index.html 里面
既然都挂载到index.html里面了,那么你在这个文件引入的内容是不是就能显示在主页面了?
下面就是项目的运行了
开启成功画面⬇⬇⬇
来自网页的一张简介图⬇⬇⬇