首页天道酬勤vue项目目录结构介绍,vue设计原理

vue项目目录结构介绍,vue设计原理

张世龙 05-05 18:39 39次浏览

Vue项目结构和项目解读一使用@Vue/CLIvue项目2vue项目结构2.1 node _ modules 2.2 public 2.3 src 2.4.git ignore 2.5 babel.config.js 2.6 package.JSON 2.7 readme.MD3vvd 3 组件3.4 index.js路由信息3.5 Home.vue组件3.6 Hello World子组件

使用@Vue/cli创建Vue项目

通过在1.13358www.Sina.com/上打开命令行并输入vue create项目名称,可以创建项目

1.2成功创建项目后,按照说明切换到项目后,然后运行npm run serve命令运行项目

二Vue项目结构2.1 node_modules此文件夹下的是项目所需的依赖关系,均通过NPM安装获取

2.2公共目录是公共目录,其中有图标和模板页,开发时与此目录无关

2.3 src项目源代码目录,项目开发基本在此目录下进行

资产

存储图像等静态资源

注意事项

组件目录。 通常用于存储小组件

劳特

路由的目录

视图

用于保存视图文件的页面目录

App.vue

项目的首页也是根组件,main.js渲染的是该组件

main.js

整个项目的入口

2.4 .千兆位忽略配置文件

2.5 babel.config.js babel配置文件的主要作用是将ES6语法转换为ES5语法,一些浏览器不支持ES6语法,也很少参与开发

2.6 package.json此文件是项目的配置文件,包括项目的名称、版本、依赖关系、开发依赖关系等

2.7自述. MD项目文档

三Vue基础项目将解密main.js是项目的入口文件,在文件中渲染App.vue组件,并在App组件中显示Home组件和About组件之间的切换。 然后通过路由配置文件index.js配置Home组件和About组件的路由信息,在Home组件中引入了HelloWorld.vue组件

3.1项目顺序main.js---app.vue---- index.js (router )--home.vue ) views )-- HelloWorld.vue

3.2 main.js项目入口main.js是项目的入口文件,mldws导入了相关组件,mldws渲染了App组件

//import是ES6语法,对应的几个组件importvuefrom ' vue ' importappfrom './app.vue ' importrouterfrom './router '/关于关闭浏览器控制台的环境提示实例化vue.config.product iig vue newvue (//路由组件router,//ES6语法,使用render的App组件

模板divid=' app ' divid=' nav ' router-link to='/' home/router-link|router-link to='/about ' about/r 需要跳转的每个组件importvuefrom ' vue ' importvuerouterfrom ' vue-router ' importhomefrom ' ./views/home根vue.use (vue 组件:根要跳转的组件const routes=[ { path: '/',name:' { path: '/about ',name: 'About ',] 使用时component: ()=import (/* webpackchunkname 3360 ' about ' */' ./views/about.vue ' ) }//导入实例化根constrouter导出默认路由器3.5 home.vue组件templatedivclass=' home ' img alt=' vuelogo ' src=' ' logo.png ' hello world msg=' welcometoyourvue.js app '/div/template script//部署子组件importhelloworldfrom'@/componenttent为了将组件名称导入到其他位置(如路由的配置文件),components:子组件//组件可以嵌套组件。 组件是用于定义子组件的导出默认值{ name : ' home '。 组件3360 { hello world }/script 3.6 hello world子组件templatedivh1{ { msg } }/h1/div/template script//导出组件导出默认值{ name 3360 ' hello world ',props 3360 { msg 3360 string }/script! - add ' scoped ' attributetolimitcsstothiscomponentonly-- -! 添加Add 'scoped '属性是为了确保定义的样式只对该组件有效--style scoped/style

vue适合开发什么项目,vue原理解析