vue-cli項目搭建

vue中文官網(wǎng) https://cn.vuejs.org/

谷歌調(diào)試工具:dev-tools

1.github下載地址:https://github.com/vuejs/vue-devtools
2.下載好后進入vue-devtools-master工程 執(zhí)行npm install ----->npm run build.
3.然后打開shells>chrome>src>manifest.json 把里面的"persistent": false改為true
4.打開谷歌瀏覽器設置--->擴展程序--》勾選開發(fā)者模式---》添加工程中的shells-->chrome的內(nèi)容,至此恭喜已經(jīng)安裝成功?。。?br> 5.打開自己的vue項目中,如果是有vue-cli構建的項目,執(zhí)行npm run dev,打開http://localhost:8080/ 服務器調(diào)試地址;至此完成devtools的安裝;

利用vue-cli來初始化我們的項目

//全局安裝webpack
npm install -g webpack

//安裝vue-cli
npm install -g vue-cli

//使用vue-cli初始化項目,初始化項目時根據(jù)需要選擇需要用到的框架(router,vuex),是否需要Eslint驗證,選否
vue init webpack my-project

//進入到目錄
cd my-project

//安裝依賴
npm install

//運行
npm run dev

vue-cli#2.0 webpack 配置分析

|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產(chǎn)環(huán)境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發(fā)環(huán)境配置
|   |-- webpack.prod.conf.js         // webpack生產(chǎn)環(huán)境配置
|-- config                           // 項目開發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開發(fā)環(huán)境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態(tài)管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件,加載各種公共組件
|-- static                           // 靜態(tài)文件,比如一些圖片,json數(shù)據(jù)等
|   |-- data                           // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳需要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息

插件

日歷插件vue-event-calender
github中文文檔:https://github.com/GeoffZhu/vue-event-calendar/blob/master/README.zh.md
演示地址:http://geoffzhu.cn/vue-event-calendar/

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容