Vue.js简单开发使用

步骤一：安装node.js

在搭建vue的开发环境之前，需要先下载node.js，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，

网址：https://nodejs.org/en/

建议使用LTS版本

步骤二：nodejs 配置全局 globle 缓存 catch：

找到自己的安装目录，在里面新建两个文件夹  node_global   node_cache，然后命令行输入 

npm config set prefix“D:\java\VueDev\node_global”

npm config set cache “D:\java\VueDev\node_cache”

 

步骤三：安装镜像

由于 npm install安装速度慢，所以本文使用阿里淘宝镜像及其命令 cnpm进行安装，cmd黑窗口输入命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

步骤四：安装Vue

输入：cnpm install vue ，回车等待终端给出响应。

步骤五：安装全局vue-cli脚手架

如果vue-cli已全局安装了以前的（1.x或2.x）软件包，则需要先使用npm uninstall vue-cli -g

输入： npm install -g @vue/cli, 安装全局vue-cli脚手架，用于快速搭建大型单页应用。

要升级全局Vue CLI软件包，您需要运行：npm update -g @vue/cli

上面显示的升级命令适用于全局Vue CLI安装。要在您的项目中升级一个或多个@vue/cli相关软件包（包括以开头的软件包@vue/cli-plugin-），请vue upgrade在项目目录中运行：

Usage: upgrade [options] [plugin-name]

(experimental) upgrade vue cli service / plugins

Options:
  -t, --to    Upgrade to a version that is not latest
  -f, --from  Skip probing installed plugin, assuming it is upgraded from the designated version
  -r, --registry  Use specified npm registry when installing dependencies
  --all                 Upgrade all plugins
  --next                Also check for alpha / beta / rc versions when upgrading
  -h, --help            output usage information

步骤六：检查Vue是否安装成功

输入： vue -V检查是否安装成功，如果返回版本号则说明安装成功。—V大写

步骤七：创建一个项目

vue create

运行以下命令来创建一个新项目：

vue create hello-world

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

步骤八：从 VS Code 启动应用

我们这里假设端口号为 8080。如果与实际情况不符 (比如 8080 端口已经被占用且 Vue CLI 为你自动选取了另一个端口号)，可以修改相应的配置。

 

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome/Firefox：Launch 环境。然后将生成的 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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

1. 在 src/components/HelloWorld.vue 的 line90 的地方设置一个断点，这里的 data 函数返回一个字符串。

   

2. 在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用：

   npm run serve

3. 来到 Debug 视图，选择“vuejs：chrome/firefox”配置，然后按 F5 或点击那个绿色的 play 按钮。

4. 随着一个新的浏览器实例打开 http://localhost:8080，你的断点现在应该被命中了。