VsCode + node+ vue.js 开发环境搭建(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiajing13579/article/details/82660037

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 这里找到的方法

猜你喜欢

转载自blog.csdn.net/xiajing13579/article/details/82660037