在windows下安裝Vue及編輯工具Sublime Text3

前言:這是第一次寫博客,不禁得有點小緊張,發出去可能也沒有人看,當是激勵一下本身,認真學習,每天向上!這篇筆記已經存了很久了,至今都尚未更到技術博客裏,今天偷閒,把筆記從新整理一下.若是你也是剛開始學習vue,必定也是查找怎麼安裝,用什麼編輯器以內的問題,那也許我能夠幫助到你(親自安裝過程).

 

安裝Vue可使用NPM方法.

若沒有npm,那就要安裝一下了.如下是安裝npm操做步驟:

1.安裝Node.js

須要使用npm安裝,若未安裝npm,可操做如下操做:

首先從Node.js官網下載對應平臺的安裝程序，網速慢的童鞋請移步國內鏡像。在windows上安裝時務必選擇所有組件,勾選Add to path.安裝完成後，在Windows環境下，請打開命令提示符(在搜索程序與文件中輸入cmd)，而後輸入node -v，若是安裝正常，你應該看到v7.6.0這樣的輸出：

C:\Users\IEUser>node -v

v7.6.0

繼續在命令提示符輸入node，此刻你將進入Node.js的交互環境。在交互環境下，你能夠輸入任意JavaScript語句，例如100+200，回車後將獲得輸出結果。

備註:要退出Node.js環境，連按兩次Ctrl+C。

2.npm

npm在Node.js安裝時順帶裝好了.咱們在命令提示符或者終端輸入npm -v，應該看到相似的輸出：

C:\>npm -v 4.1.2

 

操做以上步驟,npm安裝好了.(^_^離成功又近了一步)

 

安裝vue

因爲npm安裝速度慢,因此使用淘寶鏡像及其命令cnpm.

淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。

你可使用淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

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

這樣就可使用 cnpm 命令來安裝模塊了：

cnpm install [name]

 

npm 版本須要大於 3.0，若是低於此版本須要升級它：

# 查看版本

$ npm -v

2.3.0

 

#升級

npm  cnpm  install  npm  -g

在用 Vue.js 構建大型應用時推薦使用 NPM 安裝：

# 最新穩定版

$ cnpm  install  vue

 

命令工具

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

# 全局安裝   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 <test@runoob.com>

? 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了.

 

 

Sublime Text3

在官網上下載Sublime Text3,但可能用Sublime Text3打開vue項目文件的話,可能看上去一片白,若Sublime Text3支持Vue高亮顯示的話,就容易編輯了.

讓Sublime Text3支持Vue語法高亮顯示

1. 準備語法高亮插件vue-syntax-highlight。https://github.com/vuejs/vue-syntax-highlight

2. 下載頁面並下載：

 

解開壓縮包vue-syntax-highlight-master，其內全部文件備用。

3.將vue-syntax-highlight植入sbulime。進入sublime，選擇菜單項「Preferences->Browse Packages...」。

 

在打開的文件夾中建立「Vue」文件夾。

 

在Vue文件夾中，將vue-syntax-highlight-master壓縮包解壓後的全部文件考入。

 

4.sublime載入vue-syntax-highlight插件按下快捷鍵「ctrl+shift+p」，在打開的packages輸入框中輸入vue，選擇「Set Syntax:Vue Component」進行加載。

 

加載後重啓sublime，從新打開.vue文件，即能看到語法高亮。

 

 

 

轉載:

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

http://www.runoob.com/nodejs/nodejs-npm.html#taobaonpm

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

http://www.javashuo.com/article/p-yszyhfyq-ca.html