用 webpack npm 的方式安装vue项目后,初始文件夹如下
目录/文件 | 说明 |
---|---|
build | 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。 |
config | 配置目录,默认配置没有问题,所以我们也不用管 |
node_modules | 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管 |
src | 我们的开发目录,基本上绝大多数工作都是在这里开展的 |
static | 资源目录,我们可以把一些图片啊,字体啊,放在这里。 |
test | 初始测试目录,没用,删除即可 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了 |
index.html | 首页入口文件,基本不用管,如果是开发移动端项目,可以在head 区域加上你合适的meta 头 |
package.json | 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。 |
README.md | 不用管 |
重要的,还是
src
文件夹。
commponents:放置公共组件
App.vue:项目入口文件,设置根实例 app 的模板内容
main.js: 这是项目的核心文件。各种需要使用的文件都需要在 main.js 导入 (比如:Vue,根实例App.vue 文件,路由文件router,状态管理文件store)
rounter: 放置路由文件
store (文件夹名称自定义,另外创建): vuex 状态管理文件
项目主要以下几个文件:
index.html :网页文件 --引入 vue.js、
main.js:项目入口文件。最主要的文件。引入各种文件;创建根实例、设置根实例的模板内容(根实例的模板内容)
App.vue:(组件也是实例)vue文件,1. 设置根实例内容,然后可以像组件一样在main.js 中引入;2. 也可以直接在main.js 创建根实例后设置。
总结:
在 npm 安装 vue 初始项目里,App.vue 文件本来放置在根目录。为了试验 App.vue 这个文件是否和其他组件一样的使用功能,我把App.vue 从根目录移入到 components 文件件中了。事实证明,App.vue 和其他组件文件功能一样。
最主要是 main.js 文件:
1、引入各类文件:组件、路由、状态管理文件都需要在 main.js 中(头部)
2、main.js 中创建根实例(new Vue)
** 可设置根实例的模板 template。也可以不设置模板。如果在实例设置了模板,模板内容优先级>html 文件根元素中内容,模板内容会覆盖 html 文件根元素中内容
3、在根实例中注册要用的文件:路由、状态管理文件;组件,要在根实例中的 components 属性注册
//引入vue文件
import Vue from 'vue'
//引入组件
import App from './components/App' //从当前目录下,引入组件 App
import Hello from './components/Hello'
import Todolist from './components/Todolist'
//引入路由
//引入vuex 状态管理文件
import router from "./router/router.js"
import store from "./store/store.js"
//关闭vue 的生产提示
Vue.config.productionTip = false
//创建根实例
//设置根实例template模板内容(优先级最高,会覆盖在html文件内根元素写好的内容)
//实例中注册路由、状态管理 vuex
//实例中注册组件
new Vue({
el: '#app',
router,
store,
template:
'<div style="border: solid 1px black;padding: 5px 20px 5px"><h1>这里设置根实例的模板内容</h1>' +
'<Todolist></Todolist>' +
'</br>'+
'<h2 style="color: red;border: solid 1px red;padding: 20px">状态管理数据,返回{{message}}</h2>'+
'</div>',
components: { App:App,hello:Hello,Todolist:Todolist } ,
data () {
return {
message: this.$store.state.showFooter //使用状态管理储存数据
}
}
})
编辑器截图 main.js
![]()
index.html 文件
渲染效果:(因为main.js 里面的根实例设置了模板,所以 index.html 文件里面的内容被覆盖 了)
![]()