- ├── node_modules
项目依赖包
- ├── dist
存放打包之后生成的静态文件
- ├── public/index.html
静态页面,渲染好的组件最终通过这个页面进行展示
- ├── src
源码目录
││├── views视图,存放页面文件
││├── assets存放静态资源的文件夹,例如css、img、js、font等等
││├── components存放vue公共组件的文件
││├── App.vue项目的根组件,页面入口文件
││├── main.js程序入口文件
││├── router/index.jsvue-router目录,路由配置文件
- ├── .gitignore
Git相关文件,配置git上传需要忽略的文件格式
- ├── package.json
项目所需的各种模块以及项目的配置信息(名称、版本、许可证等)
- ├── package-lock.json
是在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号
- ├── README.md
项目说明文档。
- ├── babel.config.js
babel是一个用来将es6代码转换为es5的文件
- ├── .editorconfig
定义代码格式的文件
- ├── .babelrc
ES6语法编译配置
- ├── .browserslistrc
配置使用CSS兼容性插件的使用范围
- ├── .eslintrc.js
eslint语法检测配置文件
1、public/index.html——主页
index.html如其他html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、App.vue——根组件
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3、main.js——[入口文件]
main.js主要是引入vue框架,根组件及路由设置,并且定义vue实例,后期还可以引入插件,当然首先得安装插件。
// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App.vue'
// 关闭生产提示下给出的提示
Vue.config.productionTip = false
// 定义vue实例
new Vue({
render: h => h(App),
}).$mount('#app')