Node.js+VScode安装+Vue全家桶环境搭建+Win10

Node.js+VScode安装+Vue全家桶环境搭建+Win10

Vue的简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网: https://cn.vuejs.org/v2/guide/index.html

一、安装Node.js

1.在Node.js官网 https://nodejs.org/en/download/ 下载node.js安装包。
2.下载后进行安装。
3.打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。

4.默认安装路径在C:\Program Files\node.js(可自行修改)

5.打开此电脑的高级系统设置中的环境变量，进行环境变量配置


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210428131116775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk2OTU3NA==,size_16,color_FFFFFF,t_70
6.在命令行输入node回车，查看到输出结果就说明安装成功了

7.在node.js的安装目录（C:\Program Files\node.js）下新建两个文件夹node_cache和node_global方便集中管理。
然后在命令行输入
npm config set prefix “c:\Program Files\nodejs\node_global”
npm config set cache “c:\Program Files\nodejs\node_cache”
将来用npm install XXX -g安装以后模块就在这两个文件夹里。

8.测试npm是否有效
安装个module测试下，例如最常用的express模块。
输入命令npm install express–g

二.安装cnpm(国外镜像太慢了 使用国内taobao)

输入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org
完成后输入cnpm –v可查看到相关信息。
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到cnpm文件夹和它的文件了。如下图

三、安装webpack（js应用程序的静态模块打包器(module bundler)）和安装vue-cli（用来生成vue模版的工具）

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
Vue的组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包为.js文件
1.输入cnpm install webpack –g安装 。
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到webpack文件夹和它的文件了,还有在C:\Program Files\nodejs\node_global可看到webpack和webpack.cmd两个文件。
2.输入cnpm install vue-cli –g安装（完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到vue-cli文件夹和它的文件了,还有在C:\Program Files\nodejs\node_global可看到vue文件(如下图)）

五、测试Vue环境并且新建测试项目

1.我在F盘新建一个名为VueProject的文件夹来专门存放vue项目。
2.在命行先输入F: 进入F盘，再输入cd F:\VueProject进入到此目录。
3.输入vue init webpack test2新建一个项目

六、安装VSCode

官网https://code.visualstudio.com/Download）
1.下载安装之后打开VScode 安装开发相关插件

2.调试开发软件配置

"editor.detectIndentation": false,
  "editor.tabSize": 2,
  "prettier.tabWidth": 2,
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化

3.VScode打开test2项目文件

4.打开终端输入cnpm install先检查和下载依赖，然后在终端输入cnpm install先检查和下载依赖，然后输入cnpm run dev运行项目(有时候会报错，打开cmd用管理员打开就可以了)



5.Successful(运行成功) 返回一个路径

6.项目运行成功后，打开localhost:8080运行成功后，会看到如下所示的界面。

1.若出现以下错误:

cnpm : 无法加载文件 D:\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅
https:/go.microsoft.com /fwlink/?LinkID=135170 中的
about_Execution_Policies。 所在位置 行:1 字符: 1…

最简单办法就是用管理员身份打开cmd再执行
在powershell中执行Start-Process powershell -Verb runAs
会提示授权，并以管理员身份运行powershell
继续重新执行set-ExecutionPolicy RemoteSigned 选择 Y
执行成功
可以继续使用我们的cnpm加载

1.参考博主链接:https://blog.youkuaiyun.com/junshangshui/article/details/80376489
2.参考博主链接:https://blog.youkuaiyun.com/mehnr/article/details/104497019/