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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 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
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
详解python 中in 的 用法
2019/12/12 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
Django model class Meta原理解析
2020/11/14 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
教师党员个人自我剖析材料
2014/09/29 职场文书
党校毕业个人总结
2015/02/28 职场文书
手机销售员岗位职责
2015/04/11 职场文书
常住证明范本
2015/06/23 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android