一、安装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系统中可以看到环境变量也已经自动配置好了。如下图

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

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 "D:\node\nodejs\node_global"
npm config set cache "D:\node\nodejs\node_cache"
将来用npm install XXX -g安装以后模块就在这两个文件夹里。

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

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

在系统变path中新增一个变量D:\node\nodejs\node_modules

然后在用户变量中修改变量为D:\node\nodejs\node_global

最后就可以删掉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可看到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项目测式一下

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

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

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

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

输入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"]
}

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

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

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

具体相关配置代码如下:

"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

5.运行项目

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

Vue环境搭建+VSCode+Win10的更多相关文章

  1. Vue 环境搭建(win10)

    1.安装node node官网安装地址 推荐安装稳定版本(LTS)以及安装路径为系统盘(C) 查看node安装成功否 注释:以下命令使用 命令提示符(管理员)权限,win10 对user权限的限制了访 ...

  2. vue环境搭建+vscode

    https://blog.csdn.net/junshangshui/article/details/80376489

  3. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  4. 55.Vue环境搭建

    Vue环境搭建 在搭建过程中出现的错误解决办法  https://www.cnblogs.com/lovebing/p/9488198.html      cross-env使用笔记   cross- ...

  5. Vue环境搭建及第一个helloWorld

    Vue环境搭建及第一个helloWorld 一.环境搭建 1.node.js环境安装配置  https://www.cnblogs.com/liuqiyun/p/8133904.html 或者 htt ...

  6. 前端(二十三)—— Vue环境搭建

    目录 一.Vue环境搭建 一.Vue环境搭建 1.安装node 去官网下载node安装包 傻瓜式安装 万一安装后终端没有node环境,要进行node环境变量的配置(C:\Program Files\n ...

  7. Vue环境搭建、创建与启动、案例

    vue环境搭建 """ 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 安装cnpm npm install - ...

  8. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  9. vue 环境搭建笔记

    环境 开发工具:VS Code vue版本: 2.x 准备 使用 npm 包管理器进行安装,也可以使用 yarn 包管理器. 可以使用淘宝的 npm 镜像,国内速度更快. 使用方式: $ npm in ...

随机推荐

  1. HBase与RDBMS的区别

    此讨论并不局限于HBase,也会延伸到MongoDB和Cassandra这样的NoSQL数据库. 1.RDBMS RDBMS有以下特点: 面向视图:RDBMS表使用固定的视图,表中的数据类型也会事先定 ...

  2. sql--Truncate Table

    Truncate Table(截断表) 有时候需要清除一个表中的所有资料.要达到者个目的,一种方式是DROP TABLE 指令.不过这样整个表格就消失,而无法再被用了. 另一种方式是Delete不带w ...

  3. java线程中断

    public void Thread.interrupt() // 无返回值 public boolean Thread.isInterrupted() // 有返回值 public static b ...

  4. 酷派 5267 刷入第三方 recovery教程 刷机 ROOT

    准备工作: 一台电脑: 酷派5267手机: 一张内存卡: 下载好刷机资料:  http://pan.baidu.com/s/1i4LoVh7 备用下载: http://pan.baidu.com/s/ ...

  5. mysqlslap: Error when connecting to server: 2001 Can't create UNIX socket (24) 解决方法

    在用mysqlslap对mysql进行压力测试遇到mysqlslap: Error when connecting to server: 2001 Can't create UNIX socket ( ...

  6. VHDL之concurrent之operators

    Using operators Operators can be used to implement any combinational circuit. However, as will becom ...

  7. Linux while和for循环简单分析

    一.循环重定向 最近遇到了一种新的循环重定向写法,由于没看懂,说以网上搜索了一下,然后再此分享一下: while read line do ...... done  < file 刚开始看,不明 ...

  8. Data mapping-数据映射

    数据映射:根据数据的结构信息建立数据间的映射操作机制. 数据映射的要素: 一.数据 1.源数据: 2.目标数据: 3.数据间关系: 4.数据的元数据(结构信息). 5.元素类型的对应关系. 二.元数据 ...

  9. 数据清理,预处理 pandas dataframe 操作技巧 总结

    dsoft2 = data1.loc[(data1['程'] == "轻") | (data1['程'] == "中")]设置x下标plt.xticks(np. ...

  10. jsp+servlet 导出Excel表格

    1.项目的目录结构 2.创建一个用户类,下面会通过查询数据库把数据封装成用户实例列表 package csh.entity; /** * @author 悦文 * @create 2018-10-24 ...