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

互联网 2022/5/22 6:06:09

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/ ①…

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

image

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

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

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

image
然后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
image

在path中添加
image
③ 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 日零时起停止服务,如果使用老域名的开发者可以开始替换了。

image

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,nvmnvm-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” 反选。
image

第一次创建工程时,可以只选择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) 测试
image

选择vue2

这里选择vue版本
image

选择n

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

选择“In package.json”

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

选择n

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

创建完毕后启动

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

image

5.vue-cli项目结构解读

5.1 vue-cli工程目录结构

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

image

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 // 修改启动端口
    }
}
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[Vue-npm、vue-cli开发环境安装]http://www.zyiz.net/tech/detail-324173.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>