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

  

  

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

  

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

  

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

  

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

  

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

  

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

        npm配置设置前缀“c: \ Program Files \ nodejs \ node_global”   npm配置设置缓存“c: \ Program Files \ nodejs \ node_cache”      

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

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

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

  

  

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

  

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

  

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

  

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

  

<>强(js应用程序的静态模块打包器(模块打包机))

  

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

  

<>强(用来生成vue模版的工具)

  

vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器。

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