前端vue基础学习之vue项目文件结构

vue项目文件结构

查看上一篇前端基础学习之vue的生命周期

1. build文件用于打包创建dist目录

   1. webpack.base.conf.js
   • alias配置别名

2. config

   1. index.js
      • host：localhost，只能本地访问，修改成0.0.0.0可以ip地址访问本地需要127.0.0.1
      • port：端口号
      • autoOpenBrowser：是否启动时自动打开浏览器
      • proxyTable：配置代理

3. src 所写文件存放位置

   1. components 存放组件

   2. pages 存放页面

   3. router 路由

      1. index.js(定义路由实例)
      2. routes.js(便于管理的写法，用于路由配置)

   4. App.vue

      • 文件结构

        
        <template>
            只能有一个根元素
            <div>
            <注册的组件></注册的组件>
            </div>
         </template>
         <script>
            模块导入方式
        import 模块名 from '路径'可以省略后缀名，
        
            export default{
        		name: 取名一般为模块名,
                components:{
                模块名注册组件
            },
                data(){
                    rturn{
                        
                    }
                },
        		}   
         </script>
        <style >  
                style标签属性
        			scoped:表示作用域仅限当前组件
                    lang='scss'使用编译的语法
         </style>
        

   5. main.js 主入口文件

      • Vue.config.productionTip=false;运行时是否显示编译过程

4. index.html 单页应用主页面

5. webpack.json 项目配置文件

6. README.md 项目简介