vue 項目結構搭建 腳手架的搭建 Vue-cil

vue-cil :vue腳手架：提供基本項目結構

自己集成了不少項目模板：

　　　　webpack：

　　　　webpack-simple:

 

mac 安裝 前提示安裝好node

1.輸入 sudo npm install -g vue-cli 這個命令；

2.輸入 vue

3.輸入 vue init webpack-simple vue_demo

4進入cd vue_demo

5 安裝 npm install

6運行 sudo npm run dev

---

 

 搭建

1﹜ 安裝Vue-cli 在終端執行npm install –g vue-cli 若是mac系統安裝失敗請使用 sudo  install –g vue-cli 

2﹜ 使用vue-cli 新建項目，打開終端找一個你打算存放項目的目錄，隨便一個目錄均可以，在終端執行 vue init webpack vuecli ,PS:vuecli 是項目名稱，實際開發中修改爲你想用的項目名稱便可；

Project name :項目名稱，同項目初始化時的名稱，若是不作修改直接enter；

Project description：項目描述，這個基本能夠不用修改直接enter便可；

Author：做者，enter便可；

Runtime + Compiler: recommended for most users：enter便可；

Ininstall vue-router:是否安裝vue-router，若是須要路由功能直接enter，若是不須要直接N 而後enter；

Use ESLint to lint your code?：是否使用ESLint，是一個檢查javascript語法錯誤的工具，這個前期能夠直接N掉；

Setup unit tests with Karma + Mocha?：這個前期也能夠直接N掉；

Setup e2e tests with Nightwatch?：Nightwatch是一個測試工具，N掉便可，前期用不到；

而後根據提示執行，

cd vuecli：進入項目目錄；

npm install ：安裝項目依賴，這可能會慢些，由於有些是境外資源，有經驗的同窗能夠更換一下安裝源，百度便可；

npm run dev : 運行程序，此時你默認的瀏覽器會打開一個新的頁面，表示你安裝成功併成功使用vue-cli初始化了一個項目；

 

 

|-- build // 項目構建(webpack)相關代碼 | |-- build.js // 生產環境構建代碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱重載相關 | |-- dev-server.js // 構建本地服務器 | |-- utils.js // 構建工具相關 | |-- 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 // 測試環境變量 |-- src // 源碼目錄 | |-- assets // 資源目錄 | |-- components // vue公共組件 | |-- store // vuex的狀態管理 | |-- App.vue // 頁面入口文件 | |-- main.js // 程序入口文件，加載各類公共組件 |-- static // 靜態文件，好比一些圖片，json數據等 | |-- data // 羣聊分析獲得的數據用於數據可視化 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義代碼格式 |-- .gitignore // git上傳須要忽略的文件格式 | |-- .postcssrc.js // 經過JS插件裝換樣式的工具 |-- README.md // 項目說明 |-- favicon.ico |-- index.html // 入口頁面 |-- package.json // 項目基本信息