vue-cli腳手架 安裝

一. vue-cli 全局安裝

若已安裝的話能夠在命令行中輸入 vue -V 查看版本號

npm install --global vue-cli 全局安裝

安裝完成之後輸入命令 vue 能夠查看相關命令

 

在網速較慢的狀況下能夠使用cnpm來下載；

cnpm和npm的用法一致，可是有的時候下載的時候容易丟包

 

二.初始化項目

建立一個基於webpack模板的新項目

 

vue init webpack vue-project(隨意名稱) 

 

在此過程當中項目項目描述和做者能夠隨意寫，在有標記的地方選擇no

ESLint 是提供一個插件化的javascript代碼檢測工具，例如禁止使用多個空格等，你能夠在項目不着急完成的時候用該檢測工具；

能夠提供ESLint的網址：http://eslint.cn

 

此時打開文件夾，就能夠看到有vue-project文件生成

 

package.json是默認生成的項目依賴的包和包使用的版本號

node_modules是下一步驟生成的；

四.安裝依賴

輸入命令：cd vue-project 進入該文件夾下

npm install  安裝依賴

網速慢的狀況下用cnpm install;

下面狀況安裝成功

查看狀態：npm start

start爲項目的入口文件，你能夠查看package.json裏面有 "start": "npm run dev", 固然你也能夠本身從新命名

當你在頁面輸入localhost:8080看到vue圖標即爲安裝成功

 

 8080爲設置的默認端口號，也能夠進行修改

五.項目配置文件介紹

在腳手架中，開發目錄是src文件夾，build負責打包的，config是負責配置（內置服務器的端口、proxy代理），static是靜態目錄，test是測試

src中main.js是入口文件，在裏面建立了一個根實例，根實例的模板就是根組件App的模板，其餘的組件都在根組件裏面進行嵌套實現。

每個組件都是一個單文件組件，這種文件會被webpack利用vue-loader的工具進行編譯

template部分負責寫組件的模板內容，script中建立組件。style裏寫組件的樣式

assets目錄也是靜態目錄，在這個目標中的文件咱們使用相對路徑引入,而static目錄中的文件使用絕對地址來引入

在style上添加scoped能使這個style裏的樣式只做用於當前的組件，不加scoped就是全局樣式

習慣於在App.vue根組件的style裏寫全局樣式，而每一個組件的style最好都是局部的