Vue.js 安裝配置教程 原

一、首先進入cmd查詢通過命令查詢：

http://www.runoob.com/vue2/vue-install.html

# 查看版本
$ npm -v
2.3.0

#升級 npm
cnpm install npm -g


# 升級或安裝 cnpm
npm install cnpm -g

node-v10.8.0-x64.msi版本

如圖說明已經安裝node.js：

npm -v

# 最新穩定版
$ cnpm install vue

命令行工具

# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 這裏需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

進入項目，安裝並運行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功執行以上命令後訪問 http://localhost:8080/，輸出結果如下所示：

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

在 Cloud Studio 中運行 Vue.js

下面我們介紹如何在 Cloud Studio 中安裝、使用 Vue.js：

• step1：訪問 Cloud Studio，註冊/登錄賬戶。

• step2：在右側的運行環境菜單選擇："Node.js"

• step3：在左側代碼目錄中新建 html 目錄，編寫你的HTML代碼，例如 index.html

• tep4: 我們推薦鏈接到一個你可以手動更新的指定版本號：

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。 Vue 也可以在 cdnjs 上獲取 (cdnjs 的版本更新可能略滯後)。

• step5：在用 Vue 構建大型應用時推薦使用 NPM 安裝:

  # 最新穩定版
  $ npm install vue

• step6：Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。

  # 全局安裝 vue-cli
  $ cnpm install --global vue-cli
  # 創建一個基於 webpack 模板的新項目
  $ vue init webpack my-project
  # 這裏需要進行一些配置，默認回車即可

  進入項目，安裝並運行：

  $ cd my-project
  $ cnpm install
  $ cnpm run dev
   DONE  Compiled successfully in 4388ms
  
  > Listening at http://localhost:8080

• step6：點擊最右側的【訪問鏈接】選項卡，在訪問鏈接面板中填寫端口號爲：8080（和剛纔配置文件中的端口號一致），點擊創建鏈接，即可點擊生成的鏈接訪問我們剛剛編寫的代碼，查看 Vue.js 效果。