Web Vue VI

Web Vue VI

了解Vue CLI工程

1.工程结构

● [.idea] ：使用IntelliJ IDEA打开工程时会产生此文件夹，其中的文件都
是IntelliJ IDEA管理此工程时将使用到的，不手动管理，即使删除此文件
夹，IntelliJ IDEA也会按需自动创建此文件夹及其下必要的文件
● [node_modules]：工程中使用到的模块，也可以理解为工程的依赖项，
例如Babel、Vue等框架的文件，不手动管理
– 需要注意：如果是从Git或其它位置复制得到的工程，可能没有此文件夹，需要运行
npm install，否则将无此文件夹及其下的各依赖项，工程将无法正常启动
– 本课程提供的资源中，各练习案例也不包含此文件夹，均需要在各工程目录下执行
npm install后才可以正常运

● [public]：工程被编译打包后仍会保留的内容（文件内容可能会在编译打
包过程中修改）
– 你可以自行在此文件夹下创建子级文件夹，用于存放静态资源，例如图片等
● public/index.html：默认的主页，通常不修改其内容。
● [src]：页面源代码，除工程配置以外的所有开发都在此文件夹下
● [src/assets]：资源文件夹，通常存放图片等
– 注意：仅不需要被程序动态控制的图片放在此处

● [src/components]：视图组件，通常是可以被其它各页面复用的，是各
个.vue文件
● [src/router]：路由控制
● src/router/index.js：路由配置文件，除非工程中页面数量较大，或路
由关系复杂，否则使用这1个文件进行路由管理即可
● [src/store]：全局共享的内存中的数据
● src/store/index.js：暂不关注

● [src/views]：视图组件 ，通常，每个页面在此文件夹都应该有1个对应
的文件，可引用[src/components]下的组件
● src/App.vue：默认的主页视图组件
● src/main.js：工程的主js文件，通常用于导入工程中将使用的其它库
– 此文件中所有import语句必须在最上方位置，各import语句不区分先后顺序
● .gitigore：用于配置使用Git提交工程时将忽略的文件和文件夹
● bable.config.js：Babel的配置文件，在不熟悉的情况下不要手动修改
此文件的配置

package.json：工程的管理配置文件，相当于Maven项目的pom.xml，
在不熟悉的情况下不要手动修改此文件的配置，可能需要关注的主要有：
– scripts：支持的2个npm命令参数，例如npm run serve、npc run build – dependencies：运行时依赖项
– devDependencies：开发依赖项，将不参与打包

● package-lock.json：工程的管理配置文件，在不熟悉的情况下不要手
动修改此文件的配置
● README.md：工程的说明文档，用于开发人员编写如何使用、注意事
项、更新日志等内容，使用IntelliJ IDEA首次打开工程时，会自动打开此
文件，此文件的默认内容中提示了工程的运行命令
● vue.config.js：Vue的配置文件，在不熟悉的情况下不要手动修改此文
件的配置

2.关于视图组件

● 所有以 .vue 为后缀的都是视图组件，根目录下的App.vue默认代码为：

● 可以看到此文件中主要有2个节点：
–