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