安装VUM

  前面学习了普通组件以后,接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。

一般情况下,单文件组件,我们运行在 自动化工具vue-CLI中,可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具,

  Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows在同一台电脑中管理多个 Node 版本。

nvm工具的下载和安装教程参考:

windows:https://www.jianshu.com/p/d0e0935b150a

Mac: https://www.jianshu.com/p/622ad36ee020

常用的nvm命令

nvm list # 列出目前在nvm里面安装的所有node版本 nvm install node版本号 # 安装指定版本的node.js nvm uninstall node版本号 # 卸载指定版本的node.js nvm use node版本号 # 切换当前使用的node.js版本

如果使用nvm工具,则直接可以不用自己手动下载,如果使用nvm下载安装 node的npm比较慢的时候,可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

安装node.js

Node.js是一个新的后端(后台)语言,它的语法和JavaScript类似,所以可以说它是属于前端的后端语言,后端语言和前端语言的区别:

  • 运行环境:后端语言一般运行在服务器端,前端语言运行在客户端的浏览器上

  • 功能:后端语言可以操作文件,可以读写数据库,前端语言不能操作文件,不能读写数据库。

我们一般安装LTS(长线支持版本):

一般暗转nodejs 我们采用以下nvm指令进行安装

常用的nvm命令

nvm list # 列出目前在nvm里面安装的所有node版本

nvm install node版本号 # 安装指定版本的node.js

nvm uninstall node版本号 # 卸载指定版本的node.js

nvm use node版本号 # 切换当前使用的node.js版本

npm

  在安装node.js完成后,在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装,如果没有-g,则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时,命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档

安装Vue-CLI

npm install -g vue-cli

-g 表示安装全局模块,不会放在项目下
不加的话 默认放在项目文件下,随项目一起走

Vue自动化工具(Vue-CLI)的安装的更多相关文章

  1. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  2. Vue自动化工具(Vue-CLI)

    一.组件的概念 1.概念 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用h ...

  3. vue04 组件化开发 Vue自动化工具

    5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网 ...

  4. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

  5. 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  6. 浅入深出Vue:工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  7. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...

  8. Vue(学习第三部 自动化工具 [vue-cli])

    目录 Vue自动化工具(Vue-cli) 安装nide.js npm 安装Vue-sli 使用Vue-处理初始化创建起那段项目 vue项目执行流程图 单文件组件的使用 template 编写HTML代 ...

  9. Vue系列-03-vue-cli自动化工具

    使用Vue-CLI创建项目 安装vue-cli脚手架 Mac安装vue-cli脚手架 lichengguo@lichengguodeMacBook-Pro ~ % sudo npm install - ...

随机推荐

  1. 终于掌握vim的寄存器和系统剪贴板的使用了- 要安装vim-X11包

    vim的系统剪贴板 vim的 加号寄存器 "+ 是和系统剪贴板 相关联的. 加号寄存器和系统剪贴板之间的内容, 可以互相切换. 要把 加号寄存器中的内容, -> 放到/转移到系统剪贴板 ...

  2. 為什麼gnome-terminal中不能使用ctrl_shift_f來進行查找? 是因為 跟输入法的全局设置衝突了!

    但是,也要注意, 为什么ctrl+shift_f有时候可以使用, 有时候又不可以使用? 是因为, 这个跟输入法的状态有关, 如果输入法是英文, 那么中文的 "简体/繁体切换快捷键ctrl+s ...

  3. 【分布式事务】spring cloud集成lcn解决分布式事务

    参考地址:https://blog.csdn.net/u010882691/article/details/82256587 参考地址:https://blog.csdn.net/oyh1203/ar ...

  4. Bytom移动端钱包SDK开发基础

    比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom Byto ...

  5. 搭建springboot环境

    1.前戏准备: SpringBoot核心jar包:这里直接从Spring官网下载了1.5.9版本. jdk:jdk1.8.0_45. maven项目管理工具:3.5版本. tomcat:8.5版本. ...

  6. 【Cucumber】【命令行】

    知识点 参考:https://www.cnblogs.com/worklog/p/5253297.html cucumber的命令行选项 首先查看命令行选项.和其它命令行工具一样,cucumber提供 ...

  7. 小米MAX开发者选项 以及如何连接MAC开发RN

    打开开发者选项:设置--我的设备---全部参数-- 多次点击MiUI版本 打开开发者选项 然后返回到设置的主页面里面的更多设置就可以看到开发者选项了 在开发者选项中打开 USB调试/USB安装 将启动 ...

  8. git创建、删除分支

    //创建分支 git branch branchname //创建并切换到新分支 git checkout -b branchname //远程分支 git push origin branchnam ...

  9. 传的参数是url地址时需要特殊处理

    <a href="javascript:;" data-url="{$vo.url}" class="info_generate_qr" ...

  10. sort-选择排序

    void sort_select(vector<int> &v) { for(int i=0;i<v.size()-1;i++) { int min=v[i]; int in ...