Vue項目的npm環境搭建

Vue項目的環境搭建主要步驟以下：

vue項目建立

安裝NodeJS

1. +到官網下載本身系統對應的版本，這裏咱們下載Windows系統的64位zip文件，下載完成後解壓，能夠看到裏面有一個node.exe的可執行文件。
2. +若是你安裝的是舊版本的 npm，能夠很容易得經過 npm 命令來升級。`npm install npm -g　　# windows`

安裝 webpack

1. -安裝好 npm 以後，就能夠經過 npm 命令來下載各類工具了,安裝打包工具 webpack，-g 表示全局安裝。`npm install webpack -g`
2. +安裝 vue-cli

安裝 vue-cli

1. +安裝 vue 腳手架項目初始化工具 vue-cli，-g 表示全局安裝。`npm install vue-cli -g`

安裝 nrm

1. +安裝 nrm npm下資源控制器工具`npm install nrm -g`查看鏡像命令`nrm ls`使用某個爲默認鏡像的命令`nrm user cnpm`

安裝 Yarn

1. +Yarn是Facebook發佈的 node.js 包管理器，它比 npm 更快、更高效，可使用Yarn替代 npm 。`npm i yarn -g --verbose`

建立項目

1. +環境已經搭建完成，如今咱們經過 vue-cli 來生成一個項目，名稱爲 kitty-ui。
2. +項目建立命令以下`vue init webpack kitty-ui`

 

如下是copy被人的博客，做爲記錄地址:http://www.javashuo.com/article/p-kemzyntz-hm.html

技術基礎

開發以前，請先熟悉下面的4個文檔

• vue.js2.0中文, 優秀的JS框架
• vue-router, vue.js 配套路由
• vuex，vue.js 應用狀態管理庫
• Element，餓了麼提供的UI框架

開發環境

• Node JS（npm）
• Visual Studio Code（前端IDE）

安裝Visual Studio Code

下載地址： 官網下載地址

Visual Studio Code 是一款很是優秀的開源編輯器，很是適合做爲前端IDE, 根據本身的系統下載相應的版本進行安裝。

更多 VS Code 教程能夠參考如下資料

官網文檔：https://code.visualstudio.com/docs

簡書教程：https://www.jianshu.com/p/990b19834896

安裝NodeJS

下載地址： nodejs中文網

到官網下載本身系統對應的版本，這裏咱們下載Windows系統的64位zip文件，下載完成後解壓，能夠看到裏面有一個node.exe的可執行文件。

把Node添加到系統環境變量裏面，打開cmd命令行，輸入npm -v，若是出現以下圖的顯示，說明已經安裝正確。

 

若是你安裝的是舊版本的 npm，能夠很容易得經過 npm 命令來升級。

sudo npm install npm -g #linux

npm install npm -g　　# windows

能夠看到升級以後，再次執行 npm -v 查看版本已經升級到 6.4.0 了。

更多NodeJS教程能夠參考如下資料

中文官網：http://nodejs.cn/api/

菜鳥學堂：https://www.runoob.com/nodejs/nodejs-tutorial.html

安裝 webpack

安裝好 npm 以後，就能夠經過 npm 命令來下載各類工具了。

安裝打包工具 webpack，-g 表示全局安裝。

npm install webpack -g

更多webpack教程能夠參考如下資料

菜鳥學堂：http://www.runoob.com/w3cnote/webpack-tutorial.html

安裝 vue-cli

安裝 vue 腳手架項目初始化工具 vue-cli，-g 表示全局安裝。

npm install vue-cli -g

淘寶鏡像

由於 npm 使用的是國外中央倉庫，有時候下載速度比較「喜人」，就像 Maven 有國內鏡像同樣，npm 在國內也有鏡像可用。這裏建議使用淘寶鏡像。

安裝淘寶鏡像，安裝成功後 用 cnpm 替代 npm 命令便可，如： cnpm install webpack -g 。

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

安裝 Yarn

Yarn 是 Facebook 發佈的 node.js 包管理器，它比 npm 更快、更高效，可使用 Yarn 替代 npm 。

若是你安裝了node，就安裝了npm，可使用下面的命令來安裝：

npm i yarn -g --verbose

npm官方源訪問速度實在不敢恭維，建議使用以前切換爲淘寶鏡像，在yarn安裝完畢以後執行以下指令：

yarn config set registry https://registry.npm.taobao.org

到此爲止咱們就能夠在項目中像使用npm同樣使用yarn了。

使用 Yarn 跟 npm 差異不大，具體命令關係以下：

npm install  => yarn install
npm install --save [package] => yarn add [package]
npm install --save-dev [package] => yarn add [package] --dev
npm install --global [package] => yarn global add [package]
npm uninstall --save [package] => yarn remove [package]
npm uninstall --save-dev [package] => yarn remove [package]

建立項目

環境已經搭建完成，如今咱們經過 vue-cli 來生成一個項目，名稱爲 kitty-ui。

vue init webpack kitty-ui

一路根據提示輸入項目信息，等待項目生成。

命令執行完畢，生成項目結構以下

進入到項目根目錄，執行  yarn install (也能夠用 npm install，或淘寶 cnpm install，咱們這裏用 yarn 會快一點) 安裝依賴包。

cd kitty -ui
yarn install

依賴包安裝完成以後，會在項目根目錄下生成 node_modules 文件夾，是下載的依賴包的統一存放目錄。

安裝完成以後，執行應用啓動命令，運行項目。

npm run dev

命令執行以後，若是顯示 「I Your application is runing here ....」，就表示啓動成功了。

瀏覽器訪問對應地址，如這裏的: http://localhost:8080，會出現 vue 的介紹頁面。

到此，咱們的項目腳手架就創建起來了。

vue項目建立

安裝NodeJS

1. +到官網下載本身系統對應的版本，這裏咱們下載Windows系統的64位zip文件，下載完成後解壓，能夠看到裏面有一個node.exe的可執行文件。
2. +若是你安裝的是舊版本的 npm，能夠很容易得經過 npm 命令來升級。`npm install npm -g　　# windows`

安裝 webpack

1. -安裝好 npm 以後，就能夠經過 npm 命令來下載各類工具了,安裝打包工具 webpack，-g 表示全局安裝。`npm install webpack -g`
2. +安裝 vue-cli

安裝 vue-cli

1. +安裝 vue 腳手架項目初始化工具 vue-cli，-g 表示全局安裝。`npm install vue-cli -g`

安裝 nrm

1. +安裝 nrm npm下資源控制器工具`npm install nrm -g`查看鏡像命令`nrm ls`使用某個爲默認鏡像的命令`nrm user cnpm`

安裝 Yarn

1. +Yarn是Facebook發佈的 node.js 包管理器，它比 npm 更快、更高效，可使用Yarn替代 npm 。`npm i yarn -g --verbose`

建立項目

1. +環境已經搭建完成，如今咱們經過 vue-cli 來生成一個項目，名稱爲 kitty-ui。
2. +項目建立命令以下`vue init webpack kitty-ui`