web_前端开发JS框架篇-基础语法-Vue-cli脚手架安装及环境配置 - Go语言中文社区

web_前端开发JS框架篇-基础语法-Vue-cli脚手架安装及环境配置


Vue-cli脚手架概述

Vue-cli(脚手架):

Vue的开发必须是通过脚手架开发

Vue的脚手架: vue-cli

作用是:辅助我们完成vue项目的搭建以及开发

脚手架如何搭建?

搭建脚手架需要几个命令行工具
没有配置过这些命令的电脑 第一次上来需要进行各种安装配置,配置过的 就以后直接使用。

脚手架安装一共需要安装三个命令:

npm命令cnpm命令vue命令
npm命令是国外的 所以我们安装完 直接使用会有一些网速比较卡的情况。
所谓npm(Node Package Manager)命令是专门从国外的一个npm网站上下载各种第三方的一个工具命令。
但是npm下载的服务器在国外 有的时候有些卡 所以还有一个命令叫cnpm(淘宝镜像)
通过npm/cnpm 就可以下载安装Vue命令 这样也就完成了我们开发Vue的脚手架搭建。

vue-cli脚手架环境配置

Vue-cli脚手架搭建:

拿到新电脑第一次配置环境要做的步骤(以前没有配置过环境):

安装npm命令:

  1. nodejs官网下载node.exe 官网地址:https://nodejs.org/zh-cn/
  2. node-v8.9.4-x64.msi 右键—安装 纯英文目录!
  3. 一路 next 下一步即可 finish完成后 没有界面!!
  4. win+R 打开cmd 输入 npm回车,出来一堆英文 没有表示命令不存在 就表示安装成功

安装npm的镜像命令cnpm:

由于npm命令 下载是走的国外网站,某些时候会很慢 所以中国团队推出了一个"淘宝镜像" 号称国外网站上线的十分钟之内,淘宝镜像同步上线。命令是cnpmnpm命令怎么用 cnpm命令就怎么用。

  1. 打开cmd 输入命令: npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 等进度走完没有出现一堆 error 表示安装成功
  3. 输入cnpm回车 出现一堆非 error的英文表示安装成功

安装Vue命令(脚手架命令的安装):

  1. 打开cmd 输入命令 npm或者cnpm install vue-cli -g
    这句话表示全局安装vue脚手架命令(vue命令)
  2. 开始走进度 等到进度走完 没有出现一堆error 表示安装成功
  3. 输入命令 vue 空格 -V 注意 空格V大写 如果出现版本号 表示安装成功
  4. vue命令安装成功,环境配置完成

上面的安装时第一次电脑配置环境 不需要每天操作!

vue项目安装并启动

以后每次新创建一个vue项目时要做的步骤:

  1. 在本地自己创建一个项目存放的文件夹
  2. 用cmd (cmd要管理员身份运行) 切换到新创建vue项目的这个目录:
    切换命令: 1. 先切换盘符 d: 2. cd 文件夹的路径 回车
  3. 输入命令 vue-init webpack 自己起一个英文的项目名称(名称纯小写英文开头的名字)
  4. 等待几息的时间 开始调查问卷的方式 搭建项目
    ? Project name (myfirst) 当前项目的名称 括号为默认 直接 回车 表示选择默认
    ? Project description (A Vue.js project) 项目描述 直接 回车
    ? Author 项目作者 直接 回车
    出现一堆英文 直接 回车 Vue build standalone
    ? Install vue-router? (Y/n) 是否安装 vue-router 输入 Y 回车 必须安装
    ? Use ESLint to lint your code? (Y/n) 严格模式的格式检查 不安装 输入 n 回车
    ? Set up unit tests (Y/n) 是否安装单元测试 输入 n 回车
    ? Setup e2e tests with Nightwatch? (Y/n) 是否安装端对端测试 不安装 输入 n 回车
    ---------------------------------------------------------
    Yes, use NPM 使用npm自动安装依赖(第三方库)
    Yes, use Yarn 使用yarn 自动安装依赖
    No, I will handle that myself 我自己手动操作
    这一步骤 可以上下按键进行选择 我们一般选择第一个 但是npm太慢 所以选择第三个 回车
    ---------------------------------------------------------
    To get started:
    cd myfirst
    npm install (or if using yarn: yarn)
    npm run dev
  5. 按照提示 cd 到指定路径( cd myfirst) 回车
  6. cnpm/npm install 回车
  7. 没有出现一堆error表示依赖下载成功!
  8. 输入命令 npm run dev 回车 启动vue项目
  9. 在这里插入图片描述
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_40041509/article/details/109589242
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢