首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue.js系列之入门手册整理

dev.env.js index.js prod.env.js index.js 定义了 开发时的端口(默认是8080),定义了图片文件夹(默认static), 定义了开发模式下的...代理服务器 dev.env.js 开发环境模式的配置文件 prod.env.js 生产环境模式的配置文件 dist 打包之后的文件所在目录 node_modules node项目需要的第三方库 src...App.vue main.js assets: 存放图片的文件夹 components: 用到的"视图"和"组件"所在的文件夹。...,选择开发者模式,选择vue-devtools\shells\chrome文件夹,就可以将编译好的chrome插件引到chrome里 比较顺利的是直接安装就可以按F12调试了,如果有遇到下列问题,可以参考我的解决方法...,node版本至少大于6.11.5,有遇到如上类似错误的,要检查你安装的nodejs版本,最新版的devtools要求node版本至少大于6.11.5,解决方法就是重新安装nodejs 安装之后vue图标不显示

1.4K20

Vue.js入门手册整理

8080),定义了图片文件夹(默认static), 定义了开发模式下的 代理服务器 dev.env.js 开发环境模式的配置文件 prod.env.js 生产环境模式的配置文件 dist 打包之后的文件所在目录...node_modules node项目需要的第三方库 src 源代码的文件夹 ▾ src/ ▾ assets/ logo.png ▾ components/ HelloWorld.vue...▾ router/ index.js App.vue main.js assets: 存放图片的文件夹 components: 用到的"视图"和"组件"所在的文件夹。...,选择开发者模式,选择vue-devtools\shells\chrome文件夹,就可以将编译好的chrome插件引到chrome里 比较顺利的是直接安装就可以按F12调试了,如果有遇到下列问题,可以参考我的解决方法...,node版本至少大于6.11.5,有遇到如上类似错误的,要检查你安装的nodejs版本,最新版的devtools要求node版本至少大于6.11.5,解决方法就是重新安装nodejs 安装之后vue图标不显示

2.2K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用Golang的Gin框架和vue编写web应用

    撸了今年阿里、头条和美团的面试,我有一个重要发现.......>>> ?...Yes //提供了两种方式[npm和yarn,如果默认选择npm时会去外网下载资源,可能无法访问谷歌外网] ?...img标签,这里其实就是我们刚才看到欢迎页面的vue的logo # 其实可以看到使用了标签,这里其实是定义了默认的组件,也就是下面导入的HelloWorld $ cat App.vue...install --save axios 3. vue渲染后端数据 模拟编写一个components/HelloWorld组件 # 编写一个ApiData.vue的组件 $ cat components...此时,我们就可以看到vue成功将后端Golang的API数据进行渲染出来了。虽然只是简单渲染,但,基本上已经实现了后端API和前端vue项目的融合。接下来就需要根据需求继续改造了。

    5.9K21

    Vue框架快速入门

    当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法...Vue的状态管理功能需要使用vuex,它的中文文档可以查看https://vuex.vuejs.org/zh-cn/ 。...默认情况下数据和页面元素是单向绑定的,使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。...所以Vue引入了组件来进行模块化功能。 定义组件和定义一个Vue实例类似。不同的是,组件需要有自己的模板,而且组件的data属性必须是一个函数。...App.vue是项目默认的跟组件。main.js是项目的入口JavaScript文件。index.html是项目的默认HTML文件。

    2.2K20

    从零开始学VUE之Vue CLI(Cli 2.x 初始化项目)

    Cli 2.x 初始化项目 vue init webpack [项目名称] 运行的时候报错了 vue-cli · Failed to download repo vuejs-templates/webpack...-v 2.vue -v (没有显示版本,npm i vue-cli -g) 3.webpack -v(需要重新安装,npm install webpack -g) 三个条件满足时,运行vue...init webpack demo(demo项目名) 我的错误就是没有全局安装webpack,导致报如上的错误 重新运行就可以了 第一步 ?...输入项目名称,可以直接敲击回车,使用默认名称 ? 输入项目描述 ? 输入项目作者 ? 选择运行时模式,之前Webpack中写过,运行时+编译 运行时+打包构建 通过上下选择,先选择第一个 ?...选择EsLint的规范 选择默认的第一个 ? 是否安装单元测试,选择n ? 是否安装 e2e测试 Nightwatch,选择n ? 选择NPM 然后等待安装完成就可以了 安装完成后的目录结构 ?

    41120

    vue-cli3.x 新特性及踩坑记

    1.3 创建项目 1.3.1 默认型 新建文件夹,在该文件夹下打开命令窗口,输入以下命令进行新建项目,当然我起的项目名字叫 vue-webpack-demo vue create vue-webpack-demo...先是默认的,一路回车后的项目目录如下: 再来手动的,我起的项目名字叫 vue-webpack-demo2,如下图,让你选择那些选项,按 空格键 是选择单个,a 键 是全选。...我选择了常用的如下选项: vue-router 默认 hash 模式,所以我选择默认的,选择了 n ,而不是 history 模式: 下一步之后问询问你安装哪一种 CSS 预处理语言,我是选择了用的...选择单元测试解决方案,Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从而保证代码质量,chai 是断言库,我两个都选择了。...官方文档是这样说的: 具体配置看官方文档: vue-cli 3.0 https://cli.vuejs.org/zh/guide/ 踩坑记 1. npm 的全局路径被修改了 我都不记得在装什么包的时候修改了

    81310

    如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

    Vue-cli工具将提示您提供一系列的关于项目的问题,像这样: ? 你看,我已经接受了大部分默认脚手架设置,但我关掉Vue-router因为我们暂时不需要它。...你选择什么取决于你的项目,但请确保启用单元测试! 当你启用单元测试时,你将被要求选择一个测试运行器。 ? 我选择Karma和Mocha,因为那是我所熟悉的。...这是我们写测试的地方。让我们看看里面,看看helloworld.spec.js中有什么。 ? 让我们一块一块地把这个文件打开。在最开始,我们引入Vue和HelloWorld的组件可以用在测试。...我发现一个好的做法是花一点时间思考给定的组件应该做什么,然后编写测试来验证它。我通常不担心“单元”测试每个方法或属性。相反,我专注于测试我期望从组件中获得的行为。...最后,我们编写了自己的测试,以确保我们的组件能按照我们期望的方式工作。 虽然我们涉及了很多,但这只是冰山一角。学习测试Vue我推荐你看看Vue课程 和TDD课程。

    1.2K10

    webpack + vue 在dev和production模式下的小小区别

    看到这里,你是否有想破口大骂的冲动,怎么会this.a.result呢,这代码明显有错误吧。然后我迅速查阅了他给的demo代码,见service/index.js中的do方法,确实是怎么样写的。...立刻,我略带鄙视的口吻质问我的那位朋友,你这个几年的代码白写了吧,居然能犯这么低级的错误。我直接把这个错误现场图扔给了他。        ...作为老鸟的我,突然想到,dev模式和production模式都是运行在有sourcemap的的情况下的。这很不利用我们看编译后的代码。...三、我的推理和总结       通过上述分析,可以大致推理出webpack在dev模式下是按照commonJs模式将各个文件独立模式化加载和引用,而Build之后,各个文件模块被合并成了一个,且对servcie...vue官网说明地址:https://cn.vuejs.org/v2/guide/instance.html 3.1 原因总结 this.a为什么可以访问,是因为webpack的dev下编译是单个文件模式化引用导致的

    1.4K20

    Vue的安装及使用快速入门

    大家好,又见面了,我是你们的朋友全栈君。...js 语法检测 目前我们不需要 所以 n 回车;     Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;     Setup e2e tests...这里的资源会被webpack构建;     2)components:组件目录,我们写的组件就放在这个目录里面;     3)router:前端路由,我们需要配置的路由路径写在index.js里面;...div,以下写法是错误:     数据要写在 return 里面,而不是像文档那样子写,以下写法错误:   2、讲讲父子组件     1)在components目录下新建sub...,在html中解析成了a标签     这里只是简单的介绍了一下路由的使用,更多详细信息,请前往官网学习:https://router.vuejs.org/zh-cn/   4、如何用less

    62520

    vscode-vue-debug

    组件中写代码: export default { name: "HelloWorld", props: { msg: String, }, created()...此时如果我们打开控制台查看源码,按ctrl+p搜索我们的HelloWorld.vue,搜出来的是编译后的页面: 因此我们需要配置下: 到vue.config.js 写法可以如下: module.exports...下方改依赖的操作是为了稍后和launch.json映射上,并没有太过深入研究过webpack这块,这是我搞了一整天发现的解决办法 然后去修改一下package.json中的依赖: 在devDependencies...,则可以对应看到浏览器源码结构为webpack://,因此上方配置需要重写webpack:///src/*到${webRoot}/* 如果没生效,且结构是这样的,依赖版本也不正确,这个甚至还没有webpack....vscode/launch.json配置去重写映射上 了解学习compression-webpack-plugin这个插件 在chrome中打断点,vscode一样能直观看到变量和调用链

    70720
    领券