學習不一樣的vue實戰(1): 環境搭建

OnlyLing 發布于2019-08-01 16:56 / 2969人閱讀

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。

首先

首發博客: 我的博客

項目源碼: 源碼

項目預覽: 預覽

因為個人的喜好和工作的需要,一直想寫這樣的系列教程，今天如愿以償，但是我是第一次寫，有什么錯誤，和指教的地方，歡迎吐槽，謝謝!

1.1.1 安裝 Node.js

一般來講, 可以用以下三種方式安裝 Node.js：

通過安裝包安裝(Windows 和 Mac 用戶推薦)

通過源碼編譯安裝(Linux用戶推薦)

在 Linux 下可以通過 yum|apt-get 安裝

Windows 和 Mac 安裝： 第一步:

打開?Node官網，往下面拉，就可以看到有兩個下載選項：

左邊的是 LTS 版,就是長期支持的穩定版本，一般人都用這個版本。

右邊是最新版本，支持很多最新的語言特征，對es6有更多的支持。(可以在?http://node.green?上面獲取到 Node.js 各個版本對 ES6 的支持情況。)
我們選擇左邊的版本點擊下載。

第二步:

下載好了安裝包,打開,一直點擊繼續就可以安裝好了。

第三步：

安裝成功后，打開終端輸入下面的命令。就可以看到自己的node 和npm 安裝好了沒有。

### Linux 用戶安裝：

Linux 用戶可通過源碼編譯安裝：

curl -O https://nodejs.org/dist/v6.10.3/node-v6.10.3.tar.gz
tar -xzvf node-v6.10.3.tar.gz
cd  node-v6.10.3
./configure
make
make install

備注: 這里可能會發生因為缺少依賴包而產生的編譯錯誤。這里遇到錯誤的會就自行google了。

1.1.2 淘寶 NPM 鏡像

因為在墻的原因啊，國內直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶 NPM 鏡像。

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

第一步：安裝

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

第二步：使用

支持 npm 除了 publish 之外的所有命令, 如:

$ cnpm install [name]

1.2.1 vue-cli 介紹

vue-cli是官方的項目構建工具，一個簡單的構建工具，通過幾個默認的步驟幫助你快速的構建Vue.js項目。

第一步安裝

npm install -g vue-cli

如果用npm下載速度慢，可以使用cnpm.

第二步選擇模板

所有的官方項目模板在vuejs-templates。如果有新的模板添加進來，你需要使用下列命令，

vue init

也可以使用 vue list 來查看官方模板列表。

目前可用的模板包括：

browserify--全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試

browserify-simple--一個簡易的Browserify + vueify，以便于快速開始。

webpack--全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試

webpack-simple--一個簡易的Webpack + vueify，以便于快速開始。

simple?- 單個HTML文件中最簡單的Vue設置

1.3.1 第一個vue項目 第一步生成項目

我們的項目選擇webpack,使用以下命令

 vue init webpack vue-todos

前面就一直點回車就行了，后面使用ESLint,測試就選擇no就行。

第二步運行項目

輸入下面的命令就可以運行這個項目了。

     cd vue-todos
     npm install
     npm run dev

這是時候就會自動打開端口 http://localhost:8080/#/
你會看到這樣的頁面。那我們就成功了。

GPU云服務器云服務器樣式不一樣備案姓名不一樣 java不一樣 linux數據結果不一樣

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50837.html

學習不一樣的vue實戰(1): 環境搭建

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首發博客: 我的博客項目源碼: 源碼項目預覽: 預覽因為個人的喜好和工作的需要,一直...

BoYang 2019-08-29 12:41 評論0 收藏0
學習不一樣的vue實戰(1): 環境搭建

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首發博客: 我的博客項目源碼: 源碼項目預覽: 預覽因為個人的喜好和工作的需要,一直...

Atom 2019-08-20 16:59 評論0 收藏0
webpack+vue項目實戰（五，監聽路由，實現同個頁面不同狀態的切換）

摘要：好了，閑話不多說今天要說的時利用監聽路由的方式，實現同個頁面不同狀態的切換。只要等于，那么頁面就是待確認回款頁面進入待確認回款頁面中，回款狀態的篩選標簽要加上。 1.前言今天發完這一篇，就要這個系列告一段落了！以后如果有什么要補充的會繼續補充！因為在后臺管理項目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個是要根據后端的需求，來進來比較細化的工作，我在這里就不說了！...

guyan0319 2019-08-20 17:47 評論0 收藏0
比官方文檔更易懂的Vue.js教程！包你學會！

摘要：目前專注前端圖片優化與新技術的探研。還有一點必須要知道的是，是國人寫的，技術文檔也妥妥的是中文，想到這我就有學習的動力。注意到，等都是頁面也可以是組件，接著注冊路由器，然后開始配置路由。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由蔡述雄發表于云+社區專欄蔡述雄，現騰訊用戶體驗設計部QQ空間高級UI工程師。智圖圖片優化系統首席工程師，曾參與《眾妙之門》書籍的翻譯工...

DandJ 2019-08-23 12:07 評論0 收藏0