vue-cli的基礎入門

你們哈好！我又來了，最近打算重新順一順vue的知識。先從cli腳手架開始跟你們分享，我作的都是簡單的入門的知識。但願對你們有所幫助，有什麼不足的地方也是但願你們指出！互相成長！

vue-cli開始吧騷年！！

第一步---安裝vue-cli：

 1.檢查是否安裝node 和npm 以及版本，最好更新到最新版本  npm install npm@latest -g，檢查node -v 和npm -v來檢查

檢查沒有問題的話，接下來咱們能夠用npm 命令安裝vue-cli了，在命令行輸入下面的命令全局安裝：

npm install vue-cli -g

 若是沒有安裝上的話，多是網絡問題，能夠檢查網絡後再次安裝，也能夠用cnpm來安裝，安裝完成後，輸入vue -V來檢查是否成功（-V 的V是大寫的V注意）

第二步---初始化項目：

 

vue init <模板名稱> <項目名稱>

 

 模板名稱：vue-cli官方爲咱們提供了5種模板，

webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。

webpack-simple-一個簡單webpack+vue-loader的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。

browserify-simple-一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

simple-一個最簡單的單頁應用模板。

在實際開發中，通常咱們都會使用webpack這個模板，那咱們這裏也安裝這個模板，在命令行輸入如下命令：

vue init webpack vueApp

 輸入完命令以後，會出來讓咱們有幾個選項的選擇，咱們根據本身的需求來寫就行了

Project name :項目名稱 ，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest

Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。

Author：做者，若是你有配置git的做者，他會讀取。

Install  vue-router? 是否安裝vue的路由插件，咱們這裏須要安裝，因此選擇Y

Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。咱們這裏不須要輸入n，若是你是大型團隊開發，最好是進行配置。

setup unit tests with ? 是否須要安裝單元測試工具，咱們這裏不須要，因此輸入n。

Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試，咱們這裏不須要，因此輸入n。

 

輸入結束出現如下命令說明是初始化完成了

如今咱們根據提示，以此輸入

cd vueApp     npm run dev

出現如下結果說明是啓動成功，咱們打開瀏覽器，輸入localhost:8080就能夠進入vue-cli的初始頁面

 

頁面以下：這樣就算是搭建起來一個vue-cli的最初始，基本的頁面。裏面的文件以及配置，等下次再跟你們介紹。