VScode vue工程项目入门小白必看

我的qq  2038373094

前提

nodejs+webpack+vue-cli脚手架 都搭建好了  https://blog.csdn.net/qq_37591637/article/details/89944336

 

WORK是项目的名称
 

build里面是webpack的文件

config是配置项目的一些配置信息

node_modules 是nodejs（里面有vue文件）

src是项目文件

static是一些静态的文件

---

 

1、默认的首页是index.html；

2、这个index.html文件里面只有一个div标签 <div id="tjn"></div>

3、main.js是项目的核心配置文件

3.1、import Vue from 'vue'  是加载node_modules 下面的vue文件；这个就是为什么需要安装nodejs的原因

3.2、main.js里面初始化了Vue实例，绑定了el:'#tjn',(id="tjn")

3.3、import router from './router' 是加载router文件夹里面的index.js文件，这个index.js文件是路由的配置文件

3.4、components: { ttt },和template: '<ttt/>'的意思是为id="tjn"的这个标签绑定了组件和模板，这个组件和模板来自于'./App' ，也就是App.vue文件

3.5、ttt仅仅是这个App.vue文件的一个昵称，也可以任意

我们打开App.vue

这个是vue文件，一般组成是css+js+html代码

html代码需要放置<template>标签里面

1、css文件是<template>里面的html代码的样式表

2、<img src="./assets/logo.png">就是浏览器上面的v字图片

3、js里面name:'.vue文件的名称'，自己调用自己

4、<route-view/>就是渲染router文件夹里面index.js的内容

5、index.js是路由文件

index.js里面是routes（路由集合）

这个里面导入HelloWorld.vue文件，这个文件里面就是浏览器v字图片下面的十字（上传图片的组件）

 

---