利用vue-cli搭建vue項目

1.0下載node.js,並安裝,能成功查詢到node和npm版本號，以下圖，說明安裝成功:

 

 

2.0由於npm是國外的，下載資源比較慢，能夠使用淘寶鏡像（cnpm）

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

能成功查詢到版本號，說明安裝成功，以下圖：

 

 

3.0而後能夠全局安裝vue-cli

cnpm install -g vue-cli

 

4.0使用vue-cli來建立一個基於 webpack 模板的新項目

新建一個存放項目的文件，而後打開命令行

vue init webpack

回車鍵以後，會要求輸入文件名（不能中文），隨後一系列配置，選擇yes或者no便可

完成後會生成如下文件：

進入到當前文件夾，打開命令行，下載依賴包,輸入：cnpm install

 

5.0 依賴包下載完畢以後，在命令行輸入：npm run dev 能夠運行項目，以下圖

 

 

也能夠在編譯軟件上運行項目，如在vscode上：

 

 

以上一個基本的vue結構搭建完畢

 

下面是一些功能搭建：

*使用axios，配置跨越，步驟以下：

1.0下載axios : cnpm install axios –save

2.0 在項目中新建一個js文件，引入axios，而後進行配置：

 

3.0 在項目中的config/index.js文件中配置跨域相關信息，以下：

 

4.0 將須要使用到的後臺服務進行配置

 

而後在項目中進行服務調用，以下：

 

 

*使用css預處理器less

1.0 下載less:cnpm install less less-loader –-save-dev

2.0 安裝成功以後，在vue項目文件，build/webpack.base.conf.js文件的module-rules下面添加{test:/\.less$/,loader:」style-loader!css-loader!less-loader」},以下圖：

 

 

3.0 配置好以後，在頁面上寫css時能夠使用less,以下：

 

 

 

ps:之因此用截圖沒直接貼代碼，是想告訴你若是打算用vue，最好是本身一步步敲出來，這樣印象會深入一些！