vue進階1-1 - 項目搭建（vue-cli）

1、安裝Nodejs

1. 點擊 https://nodejs.org/en/download/ 下載並安裝node。
2. 安裝成功後，在終端輸入 npm -v ,會顯示npm的版本信息。

2、安裝淘寶鏡像

npm是nodejs的包管理工具，爲了加快下載速度，可安裝淘寶鏡像，安裝成功後可cnpm代替npm，在終端輸入

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

3、安裝vue-cli

全局安裝vue-cli，在終端輸入

npm install -g vue-cli / cnpm i -g vue-cli

安裝成功後，可用 vue -V 查看vue版本。

4、建立vue項目

使用腳手架建立項目：vue init webpack vue-demo vue-demo爲項目名稱

AppledeMacBook-Pro-3:~ apple$ vue init webpack vue-demo
? Project name vue-demo        //（工程名）:回車
? Project description A Vue.js project    // （工程介紹）：回車
? Author crr     // (做者名)：做者名
? Vue build standalone        // （是否安裝編譯器）:回車
? Install vue-router? Yes      // （是否安裝Vue路由）：回車
? Use ESLint to lint your code? No     //（是否使用ESLint檢查js代碼）：n
? Set up unit tests No       //（安裝單元測試工具）：n
? Setup e2e tests with Nightwatch? No     //（是否安裝端到端測試工具）：n
? Should we run `npm install` for you after the project has been created? (recom
mended) npm              //  (recommended)：回車

5、啓動項目

1. 進入項目目錄： cd vue-demo
2. 安裝項目所須要的依賴： npm install
3. 啓動項目： npm run dev

注意：Vue.js 不支持 IE8 及其如下 IE 版本。

6、項目結構

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要項目配置
│   └── ...
├── src/
│   ├── main.js                 # 應用入口js文件
│   ├── App.vue                 # 主應用程序組件
│   ├── components/             # 公共組件目錄
│   │   └── ...
│   └── router/                 # 前端路由
│   │   └── ...
│   └── assets/                 # 模塊資源（由webpack處理）
│       └── ...
├── static/                     # 純靜態資源（直接複製）
├── .babelrc                    # babel 配置，es6須要babel編譯
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # 編輯器 配置
├── .gitignore                  # 過濾無需上傳的文件
├── index.html                  # index.html模板
└── package.json                # 構建腳本和依賴關係

7、後臺管理系統實戰

簡單的寫了個後臺管理系統demo,須要參考的童鞋可點擊連接

https://github.com/graycrr/vu...