vue项目是如何运行起来的
目录
- vue项目如何运行
- 涉及到的项目文件
- index.html,main.js,App.vue 三者关系
- 小结
- vue踩坑记录:vue项目运行卡在百分之几几几
vue项目如何运行
涉及到的项目文件
最近因为公司项目问题,开始学习vue。万事开头难,开始写博客,纪录一下小白的成长,也方便以后看
- index.html >主页,项目入口
- main.js >main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件
- App.vue > 根组件 所有页面都是在App.vue下进行切换的
- router/index.js >路由文件
index.html,main.js,App.vue 三者关系
在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分
<div id="app">来自index.html正文中的内容</div>
上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上;
new Vue({ el: '#app',//告诉该实例要挂载的地方;(即实例装载到index.html中的位置) router, components: { App },//注册了一个局部组件App template: '<App/>'//模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容) })
小结
在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。
- node_modules为依赖的模块
- config中配置了路径端口值等
- build中配置了webpack的基本配置、开发环境配置、生产环境配置等
vue踩坑记录:vue项目运行卡在百分之几几几
今天晚上打着游戏,同事突然叫我拉项目下来运行,我打完就去拉代码了,结果vue项目运行卡在66%不动了,我也是百度一下分享别人怎么解决的文章给他,继续我的游戏!
结果呢?
游戏结束后,我拉代码,还是这个错!我也按照给他的文章做了一遍,还是卡着!随后就是漫长的探索找八哥~~~~~~~。
换掉脚手架版本~~~卡了!!!
卸载axios~~~~~~卡着!!!!
删除node_modules文件夹,在install,,卡住!!!!
改npm镜像!在阿里和原生镜像反复横跳~~~~~
。。。。。。。。。。。。。。。。。。
没法子了!看代码吧!项目运行又没有报错!我哪知道有啥问题呀 AQA
结果我在他的一个vue文件中中看到了一些绿绿的东西
把div合起来!!!
我去!!!!
在<template>标签上有两个根DIV,还有这种操作???????
合并冲突吧,运行吧,不卡了!
提交代码之后一定要合并冲突!
一定要合并冲突!
要合并冲突!
合并冲突!
冲突!!!!!!!!!
谁都不想要绿绿的东西!!!
尽量别在git控制台提交!在编译器提交,有冲突会提示!再拉代码下来合并冲突再提交!!
摸了摸我的头!
头发又少了几根了!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
使用vue-cli初始化项目时运行‘npm run dev’报错及解决
目录 vue-cli初始化项目时运行‘npm run dev’报错 vue-cli初始化项目时运行‘npm run dev’报错 npm run dev 无法启动 0 info it worked if it ends with ok1 verbose cli [1 verbose cli 'D:\\Program Files\\nodejs\\node.exe',1 verbose cli 'D:\\Program Files\\nodejs\\node_modules\\npm\\b
-
vue前端项目打包成Docker镜像并运行的实现
目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #
-
一文教会你如何运行vue项目
目录 一.运行vue项目 1.下载node.js 2.安装 webpack 3.安装vue-cli脚手架 4.使用vue-cli创建项目 5.运行项目 二.运行别人的项目 1.删除package-lock.json文件 2.切换项目目录 3.清除npm缓存 总结 一.运行vue项目 1.下载node.js 安装完成后分别在cmd中执行node -v查看是否安装成功,出现版本号就安装成功了 2.安装 webpack npm install webpack -g 安装完成后分别在cmd中执行npm
-
vue运行项目时network显示unavailable的问题及解决
目录 vue运行项目时network显示unavailable node运行项目-Network: unavailable-没有ip地址 方式一:项目文件vue.config.js文件中配置 方式二:系统环境变量配置问题 修复完成 vue运行项目时network显示unavailable vue-cli了一个项目,create以后,npm run serve时最终只有本地可以打开,但是网络上没有显示,network显示unavailable 一开始也是不知道什么原因,查了很旧,没办法了,继续试了
-
解决运行vue项目内存溢出问题
目录 运行vue项目内存溢出 记录一下 JavaScript heap out of memory(Vue项目运行内存溢出) 解决方法 运行vue项目内存溢出 npm clone下拉的项目,start时,报超出内存.查询各种方法,下面这种,解决了问题. 记录一下 (1)全局安装increase-memory-limit npm install -g increase-memory-limit (2)进入相应的项目目录下,执行 increase-memory-limit 然后再运行就不会内存溢出了
-
vue项目打包之后在本地运行的实现方法
目录 vue项目打包后在本地运行 项目打包后无法运行的问题 vue项目打包后在本地运行 vue打包之后如果直接启动index.html文件的话就会出现报错 Refused to apply style from 'http://127.0.0.1:5500/css/main.6df880bd.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME check
-
使用webpack打包后的vue项目如何正确运行(express)
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错误: 那么该如何运行呢?其实可以将生成的dist文件部署到express服务器上运行. (1).安装express-generator生成器. npm install express-generator -g // 也可使用cnpm比较快 (2).创建一个express项目. express exp
-
浅谈VUE项目打包后运行页面一片白问题
目录 1.说明 2.问题说明 3.解决 3.1.index.js 3.2.utils.js 3.3.webpack.prod.conf.js 4.总结 1.说明 我们用VUE搭建一个脚手架后,在IDEA等工具中开发时,启动都没有什么问题,但是项目开发完成之后,可能需要部署上线,所以需要进行打包操作了,一般都是用下面命令进行打包: npm run build 打包过程一般没有什么问题,然后就会在工程目录下生成一个[dist]文件夹,里面就是我们打包好的文件,把这些文件部署到Nginx中或者Tomc
-
vue项目是如何运行起来的
目录 vue项目如何运行 涉及到的项目文件 index.html,main.js,App.vue 三者关系 小结 vue踩坑记录:vue项目运行卡在百分之几几几 vue项目如何运行 涉及到的项目文件 最近因为公司项目问题,开始学习vue.万事开头难,开始写博客,纪录一下小白的成长,也方便以后看 index.html >主页,项目入口 main.js >main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 App.vue > 根组件 所有页面都是在App.vue下
-
解决vue项目打包上服务器显示404错误,本地没出错的问题
1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo
-
vue项目打包成桌面快捷方式(electron)的方法
网上有很多相关的例子了,所以我只是把自己的问题记录一下. 1.把electron的官方例子clone下来 git clone https://github.com/electron/electron-quick-start 2.进入项目,输入以下命令,运行项目 npm install//下载依赖包 npm start//启动 3.弹出界面 4.接下来将自己的vue项目打包,运行npm run build 5.将打包的项目复制到electron-quick-start的根目录 6.重新运行一下 n
-
vue修改vue项目运行端口号的方法
一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝卜是子元素,红萝卜是父元素,白萝卜蹲完不想让红萝卜蹲,怎么办? js是直接用阻止默认事件e.preventDefault(); ,vue虽然也有阻止默认事件@scroll.prevent,但是并没有效果啊,怎么办啊??有木有同学会啊??? 二.正文 记录下如何更改vue项目运行的端口号 使用webp
-
使用IDEA工具配置和运行vue项目及遇到的坑
刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过.然后一上来就需要看代码,but but 就是没有文档什么的东西,就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在配置和运行中出现了很多挫折,我就想写一下方便 大家不去采坑,直接运行好 一.在IDEA中配置vue插件 点击File-->Settings-->Plugins-->搜索vue.js插件进行安装,下面的图中我已经安装好了. 二.搭建node.js环境 安装node.js 可以去官网下载:安装过程
-
详解如何运行vue项目
在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家. 可以看下我的github:https://github.com/padipata ,里面有我学习.工作写的一些vue项目. 言归正传~~ 首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.js从node.js官网下载
-
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成
-
详解Vue项目在其他电脑npm run dev运行报错的解决方法
一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 缺少 node_modules 里面的依赖.在项目目录下使用 npm install 然后再 npm run dev. 如果在这一步当中, npm install 执行的过程中,处于一直卡顿的状态.说明网络状况不佳.建议使用 cnpm 淘宝源. 淘宝源 使用 cnpm -v 查看是否已经安装 cnpm
随机推荐
- vmware虚拟机怎么克隆 VMware11.0.0虚拟机克隆
- Java 操作Properties配置文件详解
- ADSL入侵的防范
- java中struts2实现文件上传下载功能实例解析
- javascript操作ASP.NET服务器控件
- Spring学习笔记3之消息队列(rabbitmq)发送邮件功能
- ASP.NET访问共享文件夹的详细步骤
- 深入剖析Go语言编程中switch语句的使用
- 直接在线预览Word、Excel、TXT文件之ASP.NET
- C语言二维数组中的查找的实例
- 如何解决Jquery库及其他库之间的$命名冲突
- java中Servlet Cookie取不到值原因解决办法
- js冒泡法和数组转换成字符串示例代码
- Formatting Long Lines 格式化多行字符的shell脚本
- SQL server 管理事务和数据库介绍
- 理解SQL SERVER中的逻辑读,预读和物理读
- 分享jQuery封装好的一些常用操作
- jQuery实现统计输入文字个数的方法
- 利用jQuery接受和处理xml数据的代码(.net)
- 第一次接触神奇的Bootstrap导航条