vuewebpackrouter

vue项目结构详解

Vue项目结构包括多个文件夹和文件，用于组织和管理Vue项目的不同部分和功能。
Vue项目结构的设计旨在提高项目的可维护性和可扩展性，使开发者能够更好地组织和管理项目的代码和资源。
Vue项目结构通常包括以下几个主要文件夹和文件：1. src文件夹：该文件夹是项目的主要代码目录，包含Vue组件、路由、状态管理等核心功能的代码文件。
2. assets文件夹：该文件夹用于存放项目所需的静态资源，如图片、字体等。
3. components文件夹：该文件夹用于存放项目的可复用组件，可以根据功能或页面进行进一步的细分。
4. views文件夹：该文件夹用于存放项目的页面级组件，每个页面通常对应一个.vue文件。
5. router文件夹：该文件夹用于存放项目的路由配置文件，定义了项目的路由映射关系。
6. store文件夹：该文件夹用于存放项目的状态管理文件，包括Vuex的store、actions、mutations等。
7. main.js文件：该文件是项目的入口文件，用于初始化Vue实例、引入所需的插件和配置等。
8. App.vue文件：该文件是项目的根组件，包含项目的整体布局和结构。
通过合理的组织和划分文件夹和文件，Vue项目结构可以使开发者更好地管理和维护项目的代码，提高开发效率和代码质量。
同时，良好的项目结构也有助于团队协作和项目的可扩展性。

Vue项目结构主要分为以下几个部分：
入口文件：在项目根目录下，主要有main.js文件，这是整个项目的入口点。
src文件夹：该文件夹中存放的是项目的主要代码，包括App.vue（根组件）、router（路由文件）、assets（静态资源）以及公共组件等。
构建脚本目录：该目录下放置的是webpack的基本配置文件以及开发环境和生产环境的配置。
构建配置目录：该目录下放置的是路径端口值等配置信息。
node_modules文件夹：该文件夹存放的是项目依赖的node工具包，包括axios、stylus等模块。
以上是Vue项目结构的基本内容，当然，实际的项目结构可能会根据项目的具体需求而有所变化。

vue-cli启动本地服务局域网不能访问的原因分析

1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为速度和稳定性都比较好）

2、在目标文件夹下打开终端3、执行cnpm install vue-cli -g 全局安装运行vue查看安装是否成功4、运行vue init webpack(注：模板名称) sell2(注：项目名称)5、进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖，安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件6、由于依赖项非常的多编辑器在检索module文件时会非常的耗内存，所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件注：webstorm一打开就卡死了，没办法操作文件夹这种情况的解决方法为，首先在文件夹形式下打开删除node-modules文件夹，然后进行阻止检索的方法，然后在重新cnpm install就好*（这种方法需要安装完依赖项先运行一次然后删除node_modules子文件，webstorm打开项目，禁止检索node_ module文件夹，然后在删除该文件夹，重新安装即可）

7、运行项目执行 npm run dev (注：此时不能用cnpm来运行，必须是npm)8、将需要的资源放进项目9、我们需要用到路由功能 所以需要安装vue-router安装方法：vnpm install vuve-router --save10、在build/devs-erver.js下编写自定义变量和路由功能这样在运行项目下就可以得到自己想要的json数据，这样路由就配置成功，并且得到了自己想要的数据11、在写代码之前现在html文件下引入初始化样式（保持样式的统一和美观）

12、调用组件的方式-