Vue-npm、vue-cli开发环境安装

2022-05-22 01:00:22 阅读：182 来源： 互联网

1.Vue Devtools

在使用 Vue 时，Vue官方推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
Vue Devtools安装地址: https://github.com/vuejs/devtools#vue-devtools

2.nodejs

nodejs官方下载：https://nodejs.org/en/download/
① 安装完毕之后检查是否安装成功

# 查看node版本
node -v
# 查看npm版本
npm -v

如果命令失败，查看环境变量path是否存在

② 配置npm在安装全局模块时的路径和缓存cache的路径
在node.js安装目录下新建连两个文件夹node_global、node_cache

注意给两个新文件夹User完全控制权限

然后CMD执行下面命令

# 设置npm全局路径
npm config set prefix "D:\Dev\ProgramFile\nodejs\node_global"
# 设置npm缓存路径
npm config set cache "D:\Dev\ProgramFile\nodejs\node_cache"

执行完毕之后，配置系统环境变量：
新建NODE_PATH

在path中添加

③ npm设置

# 查看当前npm源
npm config get registry
# 设置为淘宝源
npm config set registry=https://registry.npmmirror.com
# 切换为官方源（在 npm publish 的时候 需要切换回 npm 源）
npm config set registry=http://registry.npmjs.org
# 安装cnpm命令(实测发现，尽管使用npm改成淘宝仓库，发现安装速度还是远远比cnpm慢（当模块比较多的时候）。可能应该和cnpm安装的文件结构有关系吧。)
npm install -g cnpm
# 检测cnpm版本
cnpm -v

淘宝 NPM 镜像已启用新域名，由原先的 http://registry.npm.taobao.org 改为了 https://registry.npmmirror.com，目前对老的 NPM 镜像地址做了 301 跳转，但老的 http://npm.taobao.org 和 http://registry.npm.taobao.org 域名将于 2022 年 05 月 31 日零时起停止服务，如果使用老域名的开发者可以开始替换了。

3.Vue-cli

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

# 卸载
npm install -g @vue/cli
# 安装最新@vue/cli版本
npm install -g @vue/cli
# 安装指定的@vue/cli版本
npm install -g @vue/cli@5.0.4
# 查看版本
vue -V
# 升级全局的 Vue CLI 包
npm update -g @vue/cli

4.创建vue-cli项目

切换至项目工程文件夹下，新项目将存放位置

# 创建项目
vue create demo-project

选择自定义

通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。

第一次创建工程时，可以只选择Babel和Router即可。

a. Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
b. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
c. Progressive Web App (PWA) Support：渐进式Web应用程序
d. Router ：vue-router（vue路由）
e. Vuex ：vuex（vue的状态管理模式）
f. CSS Pre-processors ：CSS 预处理器（如：less、sass）
g. Linter / Formatter：代码风格检查和格式化（如：ESlint）
h. Unit Testing ：单元测试（unit tests）
i. E2E Testing ：e2e（end to end）测试

选择vue2

这里选择vue版本

选择n

选择是否使用history 形式的路由，也就是询问路径是否带 # 号。

选择“In package.json”

询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”。

选择n

询问是否将当前选择保存以备下次使用。这里选择“n”。

创建完毕后启动

# 进入项目文件夹
cd demo-project
# 启动项目
npm run serve
# 打包项目
npm run build

5.vue-cli项目结构解读

5.1 vue-cli工程目录结构

整个工程中只有index.html一个页面，所以，Vue-cli工程就是一个SPA（单页应用）工程。

5.2 package.json文件

这里配置了本工程中安装的模块

{
  // 项目名称
  "name": "demo-project",
  // 版本
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // npm run serve命令，实际上就是运行“vue-cli-service serve”
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  // npm安装的一些依赖
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

5.3 配置文件

vuecli3.x以上版本中为了精简配置文件，专门设置了一个可选的配置文件。只要在项目的根目录（与package.json同级）中，添加名称为vue.config.js的文件，就能自动被vue-cli加载。在此文件中可以配置vuecli工程中的一些配置。

module.exports = {
    devServer: {
        port: 8088 // 修改启动端口
    }
}

标签：npm,Vue,cli,vue,registry,安装
来源： https://www.cnblogs.com/a999/p/16296756.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9