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.csdn.net/junshangshui/article/details/80376489
2.参考博主链接:https://blog.csdn.net/mehnr/article/details/104497019/