vue.js 开发环境搭建最简单攻略

2023-11-15

更新:本篇文章是我很之前写的,对于一些没有工作,或者js基础不太好的同学,建议不必大费周章去搭建环境,可以直接引用 vue.js 就可以进行学习,练习,有些过程是水到渠成的,当初很多不懂的东西慢慢就懂了。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

官方指南假设你已有HTML、CSS和JavaScript中级前端知识。如果你是全新的前端开发者,它可能不是最好的想法,将一个框架作为你的第一步-最好掌握基本知识再来!其他框架以前的经验是有帮助的,但不是必需的。

做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼。
具体流程大概如下:
这里写图片描述
很难理解?没关系,我也没理解,跟着操作就行了,我是window系统。

1.安装node.js
起初是很不理解的,我学 vue.js 还要掌握 node.js吗?这是没有关联的,NPM是NodeJS下的一个包管理工具,它可以很方便的帮你管理(可以简单理解为下载)各类前端的框架或插件,类似于PHP的composer,Twitter 的 Bower 一样。使用Vue不需要安装NodeJS,这里下载NodeJS只是为了使用其内置的NPM工具,所以不需要你有任何的NodeJS基础,只需要运行 npm install vue 命令,即可把 Vue 的最新版本下载至 node_modules 文件夹。如果你只是想手动引入 Vue ,只需要在「https://vuejs.org/js/vue.js」进行下载,或者通过CDN进行引入 。
点击查看node.js安装过程

2.安装淘宝镜像
在这里,有一个问题,使用 npm 会导致网速很慢,对于大陆用户,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度。
打开命令行,输入以下命令:

npm install -g cnpm --registry= https://registry.npm.taobao.org

这里写图片描述
直接复制上去就好,下面会出现一串代码,表示在安装,无需理会。

3. 全局安装 vue-cli 脚手架
继续在命令行输出以下命令:

cnpm install webpack -g

这里写图片描述
-g 表示全局,输出上面的指令之后,下面又会有一串代码,表示安装无需理会,安装完成之后可以检测一下,输出 vue ,会显示这样的情况,表示安装成功。
这里写图片描述

4.安装 webpack
继续在命令行输入以下命令:

vue init webpack my-first-vue-project

创建一个基于 webpack 模板的新项目,后面的 my-first-vue-project 指的是这个项目的名称,你也可以换成其它的。
这里写图片描述
然后会下载安装这套模板,命令行会出现几个问题,你跟着下面的步骤回答就可以了。

?Project name
?Project description 
?Author 
?Use ESLint to lint your code?(y/n)
?Setup unit test with Karma + Mocha?(y/n)
?Setup e2e tests with Nightwatch?(y/n)

第一行问你项目名称,输入 my-first-vue-project
第二行问你项目描述,输入 this is my vue
第三行问作者的名字,输入 你自己的名字就好
第四、五、六行都直接在后面输入 NO 。

这个项目就初始化完成了,你可以在电脑上查看,在当前目录下就会多一个文件夹叫做 my-first-vue-project,里面会有些文件。
这里写图片描述

5. 用CD命令行查找进入到工程目录

这里写图片描述

6.安装依赖
在当前工程目录下输入命令行:

cnpm install

这里写图片描述

安装完成之后,在电脑上回到 my-first-vue-project 这个文件夹,里面会多一个 node_modules 文件夹。

这里写图片描述

7. 启动项目
接下来继续输入以下命令行:

npm run dev

这里写图片描述
服务器启动成功之后,下面就会给出一串指令告诉你:

Listening at http://localhost:8080

然后到浏览器进入这个页面可以看见这样的页面:
这里写图片描述

这样就表示开发环境搭建结束啦。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue.js 开发环境搭建最简单攻略 的相关文章

随机推荐

  • 菜鸟求职记1

    熬过了黑色的六月 我和往届的学长学姐一样 背着书包 拎着行李箱 开始了XV的求职之路 忙里偷闲 今天没有招聘会 一整天都在寝室 想着这几天的忙碌身影 我觉着应该将此点滴记录下来 以激励我以后的人生 9月10日 我们早上5点多开始从延安赶往西
  • Tornado 多进程分析(转载)

    引子 Tornado 是一个网络异步的的web开发框架 并且可以利用多进程进行提高效率 下面是创建一个多进程 tornado 程序的例子 usr bin env python coding utf 8 import os import ti
  • webpack5 基础配置(7) eslint-ts的使用和在webpack中的配置 加载vue文件

    上一节最后讲到了typescript的使用 ts loader本质上也是利用与tsc 所以安装ts loader的同时需要安装typescript 如果你没安装typescript 在你安装ts loader的时候 会根据ts loader
  • Git回退分支到某版本

    1 找到要回退的版本号 TortoiseGit gt Show Log gt 选中要回退的版本 gt Reset xxx to this gt commit旁复制版本号 2 本地回退到某版本 git reset hard 9224ad994
  • Idea 中 Docker 的 log 乱码

    IDEA 本地调试代码中英文显示全部正常 但是用 idea 中的 docker 插件部署到服务器 再查看 容器中 log 的时候 log 里面的中文全是乱码 就开启了一段排查过程 开始一个个排查 程序员的日常 查看容器中语言 字符集 环境
  • 【Android】java.lang.UnsatisfiedLinkError: No implementation found for void xx xx xx -- 问题解决

    Android在开发过程中总会出现各种各样的bug 要想畅通无阻的完成一个app的 开发工作固然有点难度 这不 我的程序跑着跑着又报错了 AndroidRuntime FATAL EXCEPTION Thread 4903 Process
  • 反汇编二进制代码

    最近又做了一些内核hook的工作 繁琐的地方在于二进制指令的可读性上 下面简要记录dump出指令二进制 之后利用binutils来转成可读的汇编代码 hook的主要流程参考之前的linux内核态hook模块 splice 主要就是构建一个t
  • 理解MySQL回表

    回表就是先通过数据库索引扫描出数据所在的行 再通过行主键id取出索引中未提供的数据 即基于非主键索引的查询需要多扫描一棵索引树 因此 可以通过索引先查询出id字段 再通过主键id字段 查询行中的字段数据 即通过再次查询提供MySQL查询速度
  • Java编程——输出1000以内的素数(质数)

    素数的定义是什么 质数 prime number 又称素数 有无限个 一个大于1的自然数 除了1和它本身外 不能被其他自然数 质数 整除 换句话说就是该数除了1和它本身以外不再有其他的因数 否则称为合数 public class demo7
  • STM32库函数TIM_SetCompare()的工作机制测试

    一 TIM SetCompare 函数的定义 其中 TIM SetCompareX 这个函数有四个 它们为 TIM SetCompare1 TIM SetCompare2 TIM SetCompare3 TIM SetCompare4 同时
  • 引脚悬空是什么电平_STM32单片机必须掌握的八种IO口模式和引脚配置方式

    八种IO口模式 STM32有八种IO口模式 分别是 模拟输入 浮空输入 上拉输入 下拉输入 开漏输出 推挽输出 复用开漏输出和复用推挽输出 1 模拟输入 GPIO Mode AIN模拟输入 即关闭施密特触发器 将电压信号传送到片上外设模块
  • 关于STM32F103 TIM2重映射

    关于STM32F103 TIM2重映射 如何使用重映射和如何重映射为哪些管脚 这里不详细讲解 可以百度找到 下面讲的是tim2重映射为PA15 PB3 PB10 PB11 这里的设置网上也有讲解 但是如果功能较为复杂的程序 外设用的比较多的
  • 黑马JVM总结(五)

    1 方法区 它是所有java虚拟机 线程共享的区 存储着跟类的结构相关的信息 类的成员变量 方法数据 成员方法 构造器方法 特殊方法 类的构造器 方法区在虚拟机启动时被创建 方法区逻辑上是堆的组成部分 但是不同的JVM厂商实现是不一样的 O
  • 进程,线程,协程总结

    进程 三种状态 就绪态 运行的条件都已经慢去 正在等在cpu执行 执行态 cpu正在执行其功能 等待态 等待某些 条件满足 例如一个程序sleep了 此时就处于等待态 生命周期 用户编写代码 代码本身是以进程运行的 启动程序 进入进程 就绪
  • Eclipse搭建stm32+jlink开发环境全攻略

    Eclipse搭建stm32 jlink开发环境全攻略 初级篇 前言 为什么需要这样的开发环境 免费 跨平台 自由度高 Eclipse代码提示功能强大 MDK弱爆了 注 本人原创 转载注明作者 by 秋之前 email xia mengli
  • paddleOCR踩坑记

    paddleOCR踩坑记 训练莫名终止或者评估莫名终止 训练和评估的效果都特别好 预测的效果却特别差 使用gen label py报错 将paddleOCR转成pytorch框架 训练莫名终止或者评估莫名终止 这是因为在tools prog
  • 2023全国大学生数学建模竞赛B题思路模型代码

    目录 一 选题建议先发布 思路模型代码论文第一时间更新 获取见文末名片 二 选题建议 后续思路代码论文 B 题 多波束测线问题 各题分析 获取完整思路代码见此处名片 一 选题建议先发布 思路模型代码论文第一时间更新 获取见文末名片 二 选题
  • python使用matplotlib:subplot绘制多个子图

    CSDN GitHub python使用matplotlib subplot绘制多个子图 AderXCoding language python matplotlib subplot 转自 https blog csdn net gatie
  • 解决eclipse启动报错问题:Could not create the Java Virtual Machine...

    电脑重装系统后 下了很多软件 其中就包括eclipse 但是在安装好后打开eclipse时报错 点击确定出现下面这样 网上找了原因 是因为自己在安装JDK的时候在C windows System32文件中生成了三个文件java exe ja
  • vue.js 开发环境搭建最简单攻略

    更新 本篇文章是我很之前写的 对于一些没有工作 或者js基础不太好的同学 建议不必大费周章去搭建环境 可以直接引用 vue js 就可以进行学习 练习 有些过程是水到渠成的 当初很多不懂的东西慢慢就懂了 官方指南假设你已有HTML CSS和