vue项目的标准结构？（如何构建一个大型Vue应用程序？）

vue项目的标准结构？

Vue 项目创建完成后，使用 Web Storm 打开项目，项目目录如下：

build 文件夹，用来存放项目构建脚本config 中存放项目的一些基本配置信息，最常用的就是端口转发node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件src 这个目录下存放项目的源码，即开发者写的代码放在这里static 用来存放静态资源index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：

assets 目录用来存放资产文件components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。router 目录中，存放了路由的js文件App.vue 是一个Vue组件，也是项目的第一个Vue组件main.js相当于Java中的main方法，是整个项目的入口jsmain.js 内容如下：

在main.js 中，首先导入 Vue 对象导入 App.vue ，并且命名为 App导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 '#app'，'#app' 指提前在index.html 文件中定义的一个div将 router 设置到 vue 对象中，这里是一个简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，必须要声明。template 中定义了页面模板，即将 App 组件中的内容渲染到 '#app' 这个div 中。因此，可以猜测，项目启动成功后，看到的页面效果定义在 App.vue 中

App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view页面脚本主要用来实现当前页面数据初始化、事件处理等等操作页面样式就是针对 template 中 HTML 元素的页面美化操作需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：

这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件，创建一个Router对象，并定义路由表这里定义的路由表，path为 / ，对应的组件为 HelloWorld，即浏览器地址为 / 时，在router-view位置显示 HelloWorld 组件

如何构建一个大型Vue应用程序？

vue-cli 3.0环境开发，在安装vue之前我们需要安装node环境，这个我们只要在node官方下载node绿色免安装版，然后再配置下环境变量即可使用node和npm了。

将node所在目录配置到电脑的环境变量中就可以使用了，这里我的目录是D:\Program Files\node-v10.8.0-win-x86，这里我们只要打开电脑-属性-系统设定-进阶-环境变量该路径添加到path中即可， 快捷键“win+r ”打开运行框，输入cmd在弹出的窗口中输入node -v 检查node.js是否安装成功。

这里我们配置淘宝的镜像源，这里设置永久的输入命令：npm config set registry

// 临时 npm --registry install express // 永久 npm config set registry // 验证是否成功 npm config get registry

现在我们可以开始来搭建vue-cli 3.0环境了，输入命令：npm install -g @vue/cli 安装vue3.0（-g： 指全局安装）,快捷键“win+r ”打开运行框，输入cmd在弹出的窗口中输入vue -V（大写的V哦）来 检查vue是否安装成功。

npm install -g @vue/cli

接下来我们继续创建vue项目 ，vue3.0和2.0有点区别，不用在装webpack了，直接使用命令：vue create project创建项目（project为项目名），进入项目配置，这里选择Manually select features（翻译：手动选择功能）。

进入下一个安装配置选择，这里根据项目情况自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定（以下是几个选项的相关意义），图中是我的选择。

Babel：指转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等 TypeScript：新增的选项卡 Progressive Web App (PWA) Support：指模拟原生app Router：路由管理 Vuex：vuex管理模式 CSS Pre-processors：css预处理语言 Linter / Formatter：代码规范 Unit Testing：组件单元测试 E2E Testing：端对端测试，模拟用户真实场景

接下来提示我们选择是否使用历史路由：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,我们输入Y同意即可，然后就是选择CSS预处理器语言，在弹出的选项中我选择LESS

选择ESLint的代码规范，此处使用 Standard代码规范，这里我选择了ESLint + Standard config（正常模式）

ESLint with error prevention only: 只进行报错提醒； ESLint + Airbnb conf: 不严谨模式； ESLint + Standard config: 正常模式； ESLint + Prettier: 严格模式；

接着选择代码检查，这里提示我们何时对进行代码检测，我选择在保存时进行检测，Lint and fix on commit（requires Git）【翻译：整理并固定提交时（需要git）】

接着选择单元测试解决方案，这里选择 我Jest

接着选择 Babel、PostCSS、ESLint等配置文件存放位置，第一个保存配置文件中，第二个放package.json里，这里我选择单独保存在各自的配置文件中。

接着提示是否在以后的项目中使用以上配置，这里我们选择no，下次自行配置，你也可以选择yes。

完成以上信息配置之后开始创建项目并开始下载依赖，我们只要耐心等待进度条完成，这样我们就把Vue项目创建好并完成了初始化。

现在很多人都在制作vlog视频？

我是讴歌青春，我来回答这个问题

拍视频最低配置自然是手机了。现在的手机摄像功能已经能达到网络视频需要的像素了。再个手机个头小携带方便自然是最佳选择。用个杆，就能完成拍摄任务。当然，你经济宽裕，或者你立志想一直坚持拍视频，就入手个稳定器，也就是一个手机的价钱。有了它，你怕的运动视频就能做到不抖动，画面流畅。

当然你选择微型DV也很有眼光，用它拍出的视频画质优于手机。由于DV镜头光孔要比手机大得多，通光量好，所以拍出的视频更漂亮。当然专业机型更好了。

至于后期制作短视频，第一推荐剪映APP，免费功能又强大，自动加字幕是最大亮点。像专业的后期软件ED、PR、AE等都没这一功能，他们需要卡拉OK小软件来弥补。所以向网络传视频，用剪映APP没错，制作速度快，还能自读字幕文字，配合其他功能，保管能制作出超炫视频来。希望我的能帮到你。

刚开始学HTML5？

浏览器：

浏览器推荐用Chrome,因为Chrome浏览器具有兼容性好、简洁、快速等优点，无论是在启动速度还是页面解析速度还是Javascript执行速度上都优于大多数浏览器。

编辑器：

编辑器推荐用Sublime或者Vscode，因为初学时总是需要在练习时快速看到做出的效果，而这两款编辑器非常轻量，并且集成了大量提高编程效率的插件，有着不输IDE的体验。你可以一边写网页的同时，一边切到浏览器上马上看到效果。

插件：

1、如果是使用sublime编辑器的话可以考虑安装Emmet、JSFormat、Ctags等插件提高工作效率。

Emmet可以为开发者提供一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码；

JSFormat用来对 JS代码进行格式化；

Ctags用来进行函数的快速跳转，Alt/Ctrl+点击函数名称，会跳转到相应的函数。

2、如果是使用Vscode编辑器的话可以考虑安装Debugger for Chrome、HTML CSS Support、Auto Close Tag等插件。

通过Debugger for Chrome可以直接在 VSCode 中加上断点进行debug，当代码执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试；

在编写css代码时，HTML CSS Support可智能提示当前项目所支持的所有样式；

Auto Close Tag适用于 JSX、Vue、HTML等语法，在编写标签并且键入 集成环境编辑器：

如果不想用Sublime或者Vscode这些轻量编辑器的话可以考虑集成环境编辑器（IDE），例如Web Strom和Hbuilder，这些编辑器支持绝大多数的前端语言自动填充，可以很方便地进行程序的运行和调试。

新闻名称：vue项目的标准结构？（如何构建一个大型Vue应用程序？）
分享URL：http://www.shufengxianlan.com/qtweb/news43/465693.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联