什么是vue.js

vue.js 是现代前端开发中一个重要的流行框架，与 Angular.js 和 React.js 类似，提供了对 html,js 以及 css 的编译能力，同时提供了一个运行时的框架，用于组合组件化的调用方式，这与传统的在页面增加 css 和 js，实现页面效果有很大的区别。

开发环境搭建步骤

vue.js 开发环境的搭建主要包含以下几个步骤：

• Node.js 环境的搭建，包括 npm 的配置
• 基于 npm 安装 vue 工程的脚手架，官方脚手架最新为 vue-cli3，整合并封装了 webpack 内容

  linux安装

  1. 安装npm

  sudo apt-get update
  sudo apt-get install npm

  安装淘宝镜像，因为npm的源是国外的，有时候会比较慢

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

  2.安装nodejs

1. 下载nodejs 官网地址，建议在 64 位操作系统上安装 x64 版本，因为对于很多 nodejs 的包来讲，基本都支持 64 位操作系统，未来部署环境也基本都是 x64 操作系统

说明：

• node.exe 是 node.js 的运行环境，类似 java 的 java.exe
• npm 用于管理 nodejs 组件包的下载和依赖关系包的下载，类似于 java 的 maven 或者是 python 的 pip 工具
• 由于国内外网络原因，尽量在安装完成后设置 npm 的国内镜像代理，加快下载速度，国内最常用的就是淘宝镜像
• (windows)单独设置 global 和 cache 的文件夹的目的是为了修改默认存放位置，现在很多工具都把下载内容放在 C 盘的 User 目录下，如果你的 nodejs 安装路径不在 C 盘，你的 C 盘也不想那么大的话，尽可能设置一下。
• 安装完成并且成功的标志，直接输入 node -v 以及 npm -v 能够打印出版本，证明环境变量和安装都正确

源已经添加完毕，再执行：

sudo apt-get install -y nodejs

等待安装完成,安装完成之后nodejs -v,测试是否有版本显示
升级node.js

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get update && sudo apt-get install yarn

查看cnpm是否安装，若不是版本号报错，百度找解决办法

cnpm -v

3.安装vue-cli 脚手架

vue-cli 是从头搭建 vue 工程的脚手架（也就是工具），通过该工具，可以简化很多工程搭建的配置环境，vue-cli 的官网地址为：https://cli.vuejs.org/zh/

1. 安装

安装完成后，在命令行输入（注意大小写）：

sudo cnpm install -g vue-cli

会输出安装的版本号：

vue -V

输出版本号，安装成功

3: 安装webpack，它是打包js的工具

sudo npm install -g webpack

运行启动：

• cd 命令进入当前目录
• 输入命令：

npm run serve
这个命令的配置在：package.json里

Windows环境配置

一.安装nodejs安装
1、从官网下载最新的 nodeJS
官网地址：https://nodejs.org , 下载最新的x64 位的安装包

2、安装包下载完成后就直接傻瓜式安装 (直接下一步下一步) 即可, 其中的一些选项若无特殊需求的话按照默认选项继续即可, 值得注意的是, 安装路径最好不要有中文目录。不然会对于后面的一些环境变量的配置会产生一些影响。

完成安装后文件夹目录截图:

3、安装完成后 nodejs 会自动在环境变量 path 中加入安装路径, win+r , cmd 启动 dos 窗口,

4、在命令行中输入 node -v 查询 node 版本, 输入 npm-v 查询 npm 版本.

注意: 若显示 node 不是内部或外部命令, 也不是可运行的程序时则需手动添加 path 安装路径.

右击此电脑, 选择属性, 点击左侧的高级系统设置.之后点击环境变量在系统变量中找到 path, 点击编辑.之后点击新建, 加入 node 安装路径即可.

「注意」:(windows7 的系统是直接在 path 路径后添加 nodeJS 的安装路径即可, 添加之前先查看以下末尾有没有 “:”, 若没有则需要手动添加).

之后重新执行第四步的命令即可.

5、在 NodeJs 文件目录下建立 node_global 及 node_cache 两个文件夹

「node_global」: 此文件夹是存储 npm 在安装全局模块时的路径.

「node_cache」: 此文件是缓存 cache 的路径.

6、打开 dos 窗口, 分别执行以下两条命令, 来指定全局安装的存储路径及缓存路径.

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

「ps」: 引号中的内容为你刚刚新建的两个文件夹的路径.

7、配置国内镜像 cnpm

由于 npm 下载速度比较慢, 所以我们配置一下国内的镜像下载路径:需要系统管理员权限

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

之后把 node_global 文件夹路径配置到 path 环境变量中. 否则 cnpm 命令不会生效.

接下来在 dos 命令行中执行 cnpm -v, 检查安装及配置是否成功. 配置完 path 路径后需要打开新的 dos 窗口来执行命令.

出现错误：cnpm : 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。
解决：https://blog.csdn.net/weixin_43073383/article/details/103592451

1、打开终端
2、在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
3、在终端执行：set-ExecutionPolicy RemoteSigned
4、在终端执行：get-ExecutionPolicy，显示RemoteSigned

之后执行 install 时就可以使用 cnpm install 来下载框架及依赖了.https://blog.csdn.net/qq_45337977/article/details/113725146

    (卸载CNPM的命令：npm uninstall cnpm -g)

8、npm注册登录

检测是否注册

npm who am i

在https://www.npmjs.com/网站注册

注册完成后

输入npm adduser 输入对应的用户名、密码、邮箱

    四、安装webpack

    随着前端体积越来越大，功能越来越丰富，这时候就需要将前端工程化，而webpack就是用于将前端各种文件打包起来，将源码通过node来进行打包生成一个main.js（即将多个js/css/img...等文件进行汇集）来减少请求。

cnpm install webpack -g

    <br />在命令行中输入webpack -v检查提示需要安装webpack-cli，使用命令:

cnpm install webpack-cli -g

再次webpack -v检查是否安装成功以及查看版本号。

卸载webpack: npm uninstall webpack -g.

五、安装vue-cli

   vue脚手架安装：

cnpm install -g vue-cli

在命令行中输入vue -V（注意这里是大写V）检查是否安装成功以及查看版本号.

卸载vue-cli命令：npm uninstall vue-cli -g

六、安装IDE

   开发Vue，VsCode和WebStorm都是不错的选择，说一下两者的优缺点，调试便捷性来说两者不相上下.

　　WebStorm缺点：性能方面VsCode远好于WebStorm；

　　WebStorm优点：代码引用追踪Ws有VsCode无，控制台输出WS有着色能看出那块代码有问题，VsCode无着色控制台日志，bug查看也不直观；

　　综合使用来说：推荐使用WebStorm，如果你的电脑配置实在不好可以酌情使用VsCode.
————————————————

原文链接：https://blog.csdn.net/ganmaotong/article/details/100848797

其他相关资料

vscode启动项目
https://blog.csdn.net/Lzlfeng105/article/details/106161571