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 <version>    Upgrade <package-name> to a version that is not latest
  -f, --from <version>  Skip probing installed plugin, assuming it is upgraded from the designated version
  -r, --registry <url>  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 启动应用

<p class=”tip>我们这里假设端口号为 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，你的断点现在应该被命中了。