vue-cli2.9.3怎么用

小編給大家分享一下vue-cli2.9.3怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、安裝vue-cli

1.使用npm全局安裝vue-cli（前提是你已經安裝了nodejs，否則你連npm都用不了），命令如下：

npm install vue-cli -g

2.可以用vue -V來進行查看 vue-cli的版本號。注意這里的V是大寫的。如果vue -V的命令能顯示版本號，說明已經順利的把vue-cli安裝到我們的計算機里了。

3.同時在C:\Users\xxx\AppData\Roaming\npm目錄下為會生成幾個文件:

二、初始化項目

1.用vue init命令來初始化項目：

vue init <template-name> <project-name>

<template-name>：表示模板名稱，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-一個最簡單的單頁應用模板。

<project-name>：表示項目名稱，這個你可以根據自己的項目來起名字。

2.在實際開發中，一般我們都會使用webpack這個模板，那我們這里也安裝這個模板，在命令行輸入以下命令：

vue init webpack vuecli_demo

輸入命令后，會詢問我們幾個簡單的選項，我們根據自己的需要進行填寫就可以了。

Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫
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 Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這里不需要，所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試，我們這里不需要，所以輸入n。

等待一段時間后，安裝成功顯示如下：

3.進入項目目錄 cd vuecli_demo

目錄結構如下

4.npm run dev(或npm start) 開發模式下運行我們的程序。給我們自動構建了開發用的服務器環境和在瀏覽器中打開，并實時監視我們的代碼更改，即時呈現給我們。

5.如果想要執行完npm run dev(或npm start) 后能自動打開網頁，則需要進行如下設置：

三、Vue-cli項目結構講解

由于版本實時更新和你選擇安裝的不同（這里列出的是模板為webpack的目錄結構），所以你看到的有可能和下邊的有所差別。

以下項目結構是vue-cli@2.9.3版本

|-- build       // 項目構建(webpack)相關代碼
| |-- build.js      // 生產環境構建代碼
| |-- check-version.js    // 檢查node、npm等版本
| |-- logo.png      // logo圖片
| |-- utils.js      // 構建工具相關
| |-- vue-loader.conf.js    // vue-loader配置
| |-- webpack.base.conf.js   // webpack基礎配置
| |-- webpack.dev.conf.js    // webpack開發環境配置
| |-- webpack.prod.conf.js   // webpack生產環境配置
|-- config       // 項目開發環境配置
| |-- dev.env.js      // 開發環境配置
| |-- index.js      // 項目主要配置(包括監聽端口，打包路徑等)
| |-- prod.env.js      // 生產環境配置
|-- src        // 源碼目錄
| |-- assets       // 靜態資源 
| |-- components      // vue公共組件
| |-- router       // vue路由
| |-- App.vue      // 頁面入口文件
| |-- main.js      // 程序入口文件，加載各種公共組件
|-- static       // 靜態文件，比如一些圖片，json數據等
| |-- data       // 群聊分析得到的數據用于數據可視化
|-- .babelrc       // ES6語法編譯配置
|-- .editorconfig     // 定義代碼格式
|-- .gitignore      // git上傳需要忽略的文件格式
|-- .postcssrc.js     // post-loader的插件配置文件
|-- index.html      // 入口頁面
|-- package.json      // 項目基本信息
|-- package-lock.json    // 鎖定當前安裝的包的依賴
|-- README.md      // 項目說明

1.build——[webpack配置]

build文件主要是webpack的配置，主要啟動文件是webpack.dev.conf.js，當我們輸入npm run dev首先啟動的就是webpack.dev.conf.js，它會去檢查node及npm版本，加載配置文件，啟動服務。

2.config——[vue項目配置]

config文件主要是項目相關配置，我們常用的就是當端口沖突時配置監聽端口，打包輸出路徑及命名等

3.node_modules——[依賴包]

node_modules里面是項目依賴包，其中包括很多基礎依賴，自己也可以根據需要安裝其他依賴。安裝方法為打開cmd，進入項目目錄，輸入npm install [依賴包名稱],回車。

在兩種情況下我們會自己去安裝依賴：

（1）項目運行缺少該依賴包：例如項目加載外部css會用到的css-loader，路由跳轉vue-loader等（安裝方法示例：npm install css-loader）

（2）安裝插件：如vux（基于WEUI的移動端組件庫），vue-swiper（輪播插件）

注：有時會安裝指定依賴版本，需在依賴包名稱后加上版本號信息，如安裝11.1.4版本的vue-loader，輸入npm install vue-loader@11.1.4

4.src——[項目核心文件]

項目核心文件前面已經進行了簡單的說明，接下來重點講解main.js和router

main.js——[入口文件]
主要是引入vue框架，根組件及路由設置，并且定義vue實例，

下圖中的components:{App}就是引入的根組件App.vue

后期還可以引入插件，當然首先得安裝插件。

router——[路由配置]
router文件夾下，有一個index.js，即為路由配置文件

這里定義了路徑為'/'的路由，該路由對應的頁面是Hello組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件

類似的，我們可以設置多個路由，‘/index','/list'之類的，當然首先得引入該組件，再為該組件設置路由。

以上是“vue-cli2.9.3怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！