VsCode + node+ vue.js 开发环境搭建（一）

1.安装最新的 vscode ,这个很容易安装。安装完以后 CTRL+SHIFT＋X用来安装　中文语言包环境，安装完语言包后，修改设置

　　　安装后，在 locale.json 中添加 "locale": "zh-cn"，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 "config" 筛选可用命令列表，最后选择配置语言命令。请参阅文档并获取更多信息。"locale":"zh-cn" //　修改完后重新启动

2.要在机器上开发 vue.js 有两种模式，一种直接用 .js ,这种方式不用 安装.node  环境，另一种用 webpack,

3.在机器安装 node node-v10.8.0-x64.msi,在安装过程中可能会出现权限问题， 这样安装：

     +以管理员的方式启动 CMD

     +用命令：msiexec /package node-v10.8.0-x64.msi 方式来安装后，不会有 2053，2052错误。

4. 项目运行方式。

    4.1     npm install vue-cli -g 安装  vue-cli 这个工具。

               安装了这个工具以后，就可以在目录中运行 

        cd 目录路径（项目路径）
        vue init webpack-simple first-vue 用来初始化一个项目

  注意这里不能用 -simple 如果用simple builder 与 config 目录则没有。

                 npm install 再运行 这个命令 构造项目，得到需要的包

                可以用 npm run dev 来测下这个构造是否成功。

   

      4.2下载一个 vue.项目  在 目录中执行：

                  $ npm install  //用来重新得到本项目中用得到的 node .包

                  $ npm run dev //用来执行项目运行。

5.在vscode 中直接 打开 调试工具，看能不能运行， 可以运行表示，已经安装好，这时弹出的窗口为系统默认的浏览器。IE

6.修改dev-server.js 这个文件 让 node 运行时，可以直接打开chrome 

         opn(uri) 修改为

          opn(uri,{ app: ['chrome', '--incognito'] })

这样在VSCODE 与 NODE的开发环境，就建立好了。

 

上面第6点过时了，在vue的官网上找到一个办法启动：

1. 用  在控制台  进入项目页 用 npm run dev 启动 node的这个项目

打开 config/index.js 并找到 devtool 属性。将其更新为：

devtool: 'source-map',

把下面一段加到launch.json里面

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "vuejs: chrome",

"url": "http://localhost:8080",

"webRoot": "${workspaceFolder}/src",

"breakOnLoad": true,

"sourceMapPathOverrides": {

"webpack:///src/*": "${webRoot}/*"

}

}

]

}

https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html 这里找到的方法