Vue环境搭建+VSCode+Win10的详细教程


Posted in Javascript onAugust 19, 2020

一、安装Node.js(js的运行环境)

1.在Node.js官网https://nodejs.org/en/download/ 下载安装包。
2.下载后进行安装。
3.打开命令行,输入node -v可以查看到版本号。输入npm ?v可看到npm版本号。
新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装。(将来要更新npm可用这个命令npm intall npm@latest -g)

4.在我的win10系统中可以看到环境变量也已经自动配置好了。如下图

Vue环境搭建+VSCode+Win10的详细教程

同时也可年看到npm包管理器的默认下载目录,如下图

Vue环境搭建+VSCode+Win10的详细教程

5.在命令行输入node回车,再输入console.log(“hello”); 注意以英文分号结束,查看到输出结果就说明安装成功了。
6配置npm的全局模块的存放路径以及缓存的路径
(先要退出上一步已进入的node,输入.exit或者按两次Ctrl+C就退出了node)
在node.js的安装目录(C:\Program Files\nodejs)下新建两个文件夹node_cache和node_global方便集中管理。(因为默认会将模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间,所以下面两行的命令是修改模块保存的路径,自已想放哪都行,这里我就懒得放其它盘了)
然后在命令行输入

npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"

将来用npm install XXX -g安装以后模块就在这两个文件夹里。

然后在C:\Users\[你的用户名]下用记事本打开.npmrc文件确定如下图所示就说明设置成功了。

Vue环境搭建+VSCode+Win10的详细教程

7.配置npm的环境变量(因为上面修改了路径)

在系统变path中新增一个变量C:\Program Files\nodejs\node_global\node_modules

Vue环境搭建+VSCode+Win10的详细教程

然后在用户变量中修改变量为C:\Program Files\nodejs\node_global

Vue环境搭建+VSCode+Win10的详细教程

最后就可以删掉C:\Users\xlz\AppData\Roaming下的npm目录了。(这里得显示隐藏的项目才能看到AppData目录)
(注意:修改了环境变量后要重新打开命令行界面)
8..测式npm
安装个module测试下,例如最常用的express模块。
输入命令npm install express ?g
完成后在C:\Program Files\nodejs\node_global\node_modules目录下就可看到express文件夹和它的文件了。

二、安装cnpm(淘宝的npm)

因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。
1.下载安装cnpm并且使用淘宝的服务器做为的包源 。
输入命令:npm install ?g cnpm --registry=https://registry.npm.taobao.org注意registry前面是两个杠啊。
完成后输入cnpm ?v可查看到相关信息。

完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到cnpm文件夹和它的文件了。如下图

Vue环境搭建+VSCode+Win10的详细教程

还有在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd两个文件。

三、安装webpack(js应用程序的静态模块打包器(module bundler))

当 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两个文件。

四、安装vue-cli(用来生成vue模版的工具)

vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器。
vue-cli是脚手架,就是用配置好的模版快速搭起一个项目来,省去配置webpack的基本内容。通过vue init 模版名 项目名,然后再有几个简单设置就建起项目了。
1.输入cnpm install vue-cli ?g安装,
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到vue-cli文件夹和它的文件了,还有在C:\Program Files\nodejs\node_global可看到vue的六个文件。

如下图

Vue环境搭建+VSCode+Win10的详细教程

五、新建一个Vue项目测式一下

为了访止出现什么问题,我关闭命令行界面后重新打开命令行界面。
1.我在D盘新建一个名为VueProjects的文件夹来专门存放vue项目。
2.在命行先输入d: 进入D盘,再输入cd d:\VueProjects进入到此目录。
3.输入vue init webpack test1新建一个项目,

在新建过程中会要输入几次回车和y,如下图(记得最后一步选择No I will handle that myselft,也就是创建完项目后由我自己来下载依赖)

Vue环境搭建+VSCode+Win10的详细教程

完成后会创建项目,如下图

Vue环境搭建+VSCode+Win10的详细教程

然后输入cd test1进入项目目录,

输入cnpm install下载安装项目的依赖(注意不是用的npm,而是cnpm,这样快些),完成后可在目录中看到所有有依赖,如下图

Vue环境搭建+VSCode+Win10的详细教程

输入cnpm run dev(注意不是用的npm,而是cnpm)后会给出提示让我们在浏览器通过http://localhost:8080地址访问。

六、安装VSCode( 官网https://code.visualstudio.com/Download)

安装过程就不写了,下一步下一步就完成了。
1.安装vetur插件,是vue语法的高亮插件。
2.安装eslint插件,是智能错误检测插件。

这两年插件安装,先要打开:文件-〉首选项-〉设置,在用户设置中输入如下代码

"emmet.syntaxProfiles": {
 "vue-html": "html",
 "vue": "html"
 }
 
"eslint.validate": [
 "javascript",
 "javascriptreact",
 "html",
 "vue"
],
 
"eslint.options": {
 "plugins": ["html"]
}

Vue环境搭建+VSCode+Win10的详细教程

也可以通过左边的扩展,然后搜索相应插件安装。

3.安装prettier插件,是代码格式化工具

Vue环境搭建+VSCode+Win10的详细教程

装完后重启VSCode,然打开设置,搜索eslint,接首在右侧用户配置添加相关配置

Vue环境搭建+VSCode+Win10的详细教程

具体相关配置代码如下:

"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格式进行格式化

4.打开项目test1

Vue环境搭建+VSCode+Win10的详细教程

5.运行项目

在终端输入cnpm install先检查和下载依赖,然后输入cnpm run dev运行项目,如下图

Vue环境搭建+VSCode+Win10的详细教程

最后给出提示,打开浏览器输入http://localhost:8080这个地址就可访问了。

七、VS2017中使用npm

1.新建一个asp.net core空白项目。

2.设置nodejs程序所在目录(注意排在.\node_modules\.bin下面)

Vue环境搭建+VSCode+Win10的详细教程

3.打开cmd 或者powershell,切换到asp.net core项目目录下。

4.输入要安装的js包,例如我这里要下载安装oidc-client : cnpm install oidc-client

5.然后在vs2017中就可以看到了

Vue环境搭建+VSCode+Win10的详细教程

总结

到此这篇关于Vue环境搭建+VSCode+Win10的文章就介绍到这了,更多相关Vue环境搭建+VSCode+Win10内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 #Javascript
You might like
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php自定义时间转换函数示例
2016/12/07 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
python开发之for循环操作实例详解
2015/11/12 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python对象与引用的介绍
2019/01/24 Python
python开头的coding设置方法
2019/08/08 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
经典团队口号大全
2014/06/21 职场文书
银行主办会计岗位职责
2014/08/13 职场文书