vue-cli的安裝及使用

1、    node 和npm 

一、在安裝vue-cli前，要確認本身的電腦是否安裝了node和npm

二、查詢版本以下（vue腳手架支持node@4.xx以上）

　　node -v    查詢node版本

       npm  -v    查詢npm版本

 

2、全局安裝vue-cli

一、安裝命令

npm install -g vue-cli    // -g是安裝到全局

 

二、安裝後可終端輸入vue回車查看  vue對應命令，以下

 

3、初始化項目

一、命令以下

npm vue init webpack yyb    //yyb是項目名

二、等模板下載成功後，或有一個交互式的選項選擇，根據選擇內容填寫和回車就好

三、初始化完成後，會提示開啓腳手架的命令，以下

 

四、cd  yyb   爲進入項目文件夾，而後npm  run  dev啓動腳手架

五、啓動成功會顯示以下

 

提示  運行腳手架   打開http://localhost:8081便可

六、運行成功以下

 

好，到這步vue-cli的安裝和運行就完成了

 

4、腳手架的目錄文件

 

一、目錄介紹

build/          // 項目構建(webpack)相關代碼 
    build.js       // 生產環境構建代碼
    check-versions.js // 檢查node&npm等版本
　　logo.png           //vue logo
    utils.js          // 構建配置公用工具
    vue-loader.conf.js // vue加載器
    webpack.base.conf.js // webpack基礎環境配置
    webpack.dev.conf.js //  webpack開發環境配置
    webpack.prod.conf.js // webpack生產環境配置
config/           // 項目開發環境配置相關代碼   
    dev.env.js    // 開發環境變量（看詞明意）
    index.js       //項目一些配置變量
    prod.env.js    // 生產環境變量
    test.env.js     // 測試環境變量
    
dist/      //npm run build打包後生成的文件夾
node_modules/
    ...     // 項目依賴的模塊 
src/            // 源碼目錄       
    assets/         // 資源目錄 
        logo.png
    components/         // vue公共組件
       
    router/             // 前端路由
        index.js// 路由配置文件
    store/                          // vuex的狀態管理
    App.vue  // 頁面入口文件（根組件）
    main.js  // 程序入口文件（入口js文件）    
static       // 靜態文件，好比一些圖片，json數據等
    .gitkeep    //這個裏面的gitkeep是這個目錄爲空，也能夠把這個目錄提交的git倉庫裏面，由於一般一個空目錄是不能提交git倉庫裏面的
    
.babelrc// ES6語法編譯配置
.editorconfig// 定義代碼格式
.gitignore// git上傳須要忽略的文件格式
index.html// 入口頁面
package.json// 項目基本信息
README.md// 項目說明