锐客网

  1. 首页 > 睿知 > >

vue cli 项目结构分析,Vue项目结构分析

经验分享睿知

这个主功能也可以用来缩短包构造的时间；vue-cli3项目npmrunbuild-报告生成未生成分析Figurevue-1/ 。vue- cli脚手架安装与操作vue--1/在文件的样式部分引用根目录怎么办 。

1、Vue 项目启动过程以及配置当我们点击npmrundev时 ， 这是启动Vue项目项目，那么它的启动过程是什么样的呢？Vue 项目开车流程，本文简要介绍 。执行npmrundev时 ， 会在当前目录下找到package.json文件，其中包含项目的名称版本、项目的依赖关系等相关信息 。从下图可以看出，启动npmrundev命令后，将加载build/webpack.dev.conf.js配置，并启动webpackdevserver 。

【vue cli 项目结构分析,Vue项目结构分析】可以看到，index.js文件包含了服务器主机和端口的相关配置以及入口文件，默认启动端口为8080，可以在这里修改 。Index.html的内容很简单，主要提供了一个div到vue mount 。在main.js中，介绍了modules vue、App和路由器，创建了一个Vue对象，App的内容 。vue template挂载在index.html的id为app的div标签下，绑定了路由配置 。

2、Vue 项目创建基础配置Vue 项目创建时一些基本配置的注意事项:CLI为@vuecli全局安装的npm包用于终端提供vue相关指令 ， 可用于创建项目和工程 。@vuecli服务开发环境的依赖项CLIservice，建立在webpack和webpackdevserver之上，可以用来启动服务、编译构建build构建项目、配置css、配置webpack等 。CLI插件可以集成一些货架包的快速配置项目，等等 。项目 Create，cd到指定目录 ， 执行项目create后会有几个配置选项 。具体如下:1 。1.usehistorymodeforrouterY，即vuerouter利用浏览器自身哈希模式和历史模式的特点实现前端路由，其中哈希模式浏览器的url地址会有一个#号 。History在html5的historyinterface中使用了新的pushState和replaceState方法 。2.PickaCSSpreprocessorstylusSCSS/SASS: SCSS是sass3的新语法 ， 与css3完全兼容 。

3、Vue3-前端构建工具(Vue-Cli和Vite vue3使用环境:VueCLI4.x以上，Node.js以上版本 。Main.jsVite是一个web开发和构建工具 。由于其原生的ES模块导入方式，可以实现闪电冷服务器启动 。使用Vite，我们可以快速构建Vue 项目 。Vite需要Node.js版本12.0或以上 。在Vue3中 ， 需要引入computed Composite API来定义计算属性 。

    推荐阅读


    上一篇：功能分析工具的特点是,销售渠道特点及功能分析

    下一篇：数据同步分析器如何使用