**概要** | | Vue.js | ThinkPHP5 | | | --- | --- | --- | --- | | 功能 | <li>內容渲染顯示 </li> <li>響應用戶操作 </li> <li>向后端發送請求 </li> | <li>響應前端發送的請求 </li> | | | 版本 | 2.6 | 5.1 | | | 命令行工具 | `vue` (npm包名@vue/cli ，v3.8) | `composer`，v1.9 | | | 入口文件路徑 | `/dist/main.html` | `/public/index.php` | | | | | | | ***** 內容索引 [TOC] ***** ## Frontend (Vue.js + Node.js) 前端環境 | | Vue Cli | NodeJs | npm | Webpack | Babel？ | | --- | --- | --- | --- | --- | --- | | 版本 | 3.8 | 10.16 | 6.9 | 4.40 | | 功能 | <li>Interactive project scaffolding via `@vue/cli`.</li> <li>Zero config rapid prototyping via`@vue/cli`+`@vue/cli-service-global`.</li> <li>A runtime dependency (`@vue/cli-service`) that is:<ul><li>Upgradeable;</li><li>Built on top of webpack, with sensible defaults;</li><li>Configurable via in-project config file;</li><li>Extensible via plugins</li></ul></li><li>A rich collection of official plugins integrating the best tools in the frontend ecosystem.</li><li>A full graphical user interface to create and manage Vue.js projects.</li> | NodeJs開發環境 | node package management，js包管理工具 | 前端編譯打包工具 | 模塊化功能（兼容ES2015+標準） | | | | | | | | ### Nodejs環境搭建 #### OSX or Linux Node version managers [[官方網站]](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#osx-or-linux-node-version-managers) * [nvm](https://github.com/creationix/nvm) #### Windows Node version managers [[官方網站]](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#windows-node-version-managers) * [nvm-windows](https://github.com/coreybutler/nvm-windows) #### Checking your version of npm and Node.js To see if you already have Node.js and npm installed and check the installed version, run the following commands: ~~~bash node -v npm -v ~~~ #### cnpm 使用說明 [[淘寶 NPM 鏡像]](https://npm.taobao.org/) 可以使用淘寶定制的[`cnpm`](https://github.com/cnpm/cnpm)(gzip 壓縮支持) 命令行工具代替默認的`npm`: ~~~bash $ npm install -g cnpm --registry=https://registry.npm.taobao.org ~~~ 或者直接通過添加`npm`參數`alias`一個新命令: ~~~bash alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc" # Or alias it in .bashrc or .zshrc $ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc ~~~ #### npm安裝package.json中的模塊依賴 1.package.json不存在時 命令:`npm init`可自動創建package.json文件 2.package.json存在時 直接命令:`npm install` 或者 `npm install –save-dev`會自動將package.json中的模塊安裝到node-modules文件夾下 ### `Vue Cli`：快速開發Vue項目工具 `Vue CLI` aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting. #### **install** 全局安裝`vue-cli` ~~~bash $ cnpm install -g @vue/cli ~~~ #### **組成** 1. **CLI**：npm包名`@vue/cli`, is a globally installed npm package and provides the`vue`command in your terminal. 2. **CLI Service**：npm包名`@vue/cli-service`, is a development dependency. It's an npm package installed locally into every project created by`@vue/cli`. The CLI Service is built on top of [webpack](http://webpack.js.org/) and [webpack-dev-server](https://github.com/webpack/webpack-dev-server). It contains: * The core service that loads other CLI Plugins; * An internal webpack config that is optimized for most apps; * The`vue-cli-service`binary inside the project, which comes with the basic`serve`,`build`and`inspect`commands. 3. **CLI Plugins**： CLI Plugins are npm packages that provide optional features to your Vue CLI projects,such as Babel/TypeScript transpilation, ESLint integration, unit testing, and end-to-end testing. * built-in plugins：npm包名`@vue/cli-plugin-`, * community plugins：npm包名`vue-cli-plugin-`, #### 建立項目 1. 新建 ~~~bash $ vue create hello-world ~~~ 2. 已有目錄下創建 ~~~bash $ vue create . ~~~ The default setup is great for quickly prototyping a new project, while the manual setup provides more options that are likely needed for more production-oriented projects. If you chose to manually select features, at the end of the prompts you also have the option to save your selections as a preset so that you can reuse it in the future. #### `~/.vuerc` Saved presets will be stored in a JSON file named`.vuerc`in your user home directory(path: `~/.vuerc`). If you wish to modify saved presets / options, you can do so by editing this file. #### Using the GUI You can also create and manage projects using a graphical interface with the`vue ui`command: ~~~bash $ vue ui ~~~ The above command will open a browser window with a GUI that guides you through the project creation process.  依賴/集成 ### 開發輔助包 #### vuex ~~~bash $cnpm install vuex --save ~~~ #### vue-devtools - 使用yarn 安裝 Vue-DevTools 1. 從 github?下載 [vuejs\/vue-devtools](https://github.com/vuejs/vue-devtools/archive/dev.zip "下載源碼") 2. 安裝`yarn`?及?編譯 `vue-devtools` ~~~bash npm install yarn -g yarn -v cd vue-devtools-dev yarn install yarn run build ~~~ 3. 修改shells>chrome文件夾下的mainifest.json 中的persistant為true 4. 找到谷歌瀏覽器的擴展程序功能，勾選開發者模式，然后我們將插件文件夾里的shells>chorme文件夾直接拖到頁面中，完成安裝。 - Manual Installation for Chrome This is only necessary when you want to build the extension yourself from source to get not-yet-released features. **Make sure you are using Node 6+ and NPM 3+** 1. Clone this repo (`git clone https://github.com/vuejs/vue-devtools`) 2. `npm install` (Or `yarn install` if you are using yarn as the package manager) 3. `npm run build` 4. Open Chrome extension page 5. Check "developer mode" 6. Click "load unpacked extension", and choose`shells/chrome`. - Testing as Firefox addon 1. Install`web-ext` ~~~ $ npm install --global web-ext ~~~ Or, for Yarn: ~~~ $ yarn global add web-ext ~~~ Also, make sure`PATH`is set up. Something like this in`~/.bash_profile`: ~~~ $ PATH=$PATH:$(yarn global bin) ~~~ 2. Build and run in Firefox ~~~ $ npm run build $ npm run run:firefox ~~~ When using Yarn, just replace`npm`with`yarn`. #### fontawesome ~~~bash $cnpm i --save @fortawesome/fontawesome-svg-core $cnpm i --save @fortawesome/vue-fontawesome $cnpm i --save @fortawesome/free-solid-svg-icons $cnpm i --save @fortawesome/free-brands-svg-icons $cnpm i --save @fortawesome/free-regular-svg-icons ~~~ #### chart.js ~~~bash $cnpm i --save chart.js ~~~ #### bootstrap-vue ~~~bash $cnpm i --save-dev bootstrap $cnpm i --save-dev bootstrap-vue ~~~ ### webpack配置 [[官方網站]](https://cli.vuejs.org/guide/webpack.html) - 在“vue.conf.js”中進行配置更改。 - 輸出配置文件查看 ~~~bash $ vue inspect > output-momi-vue.js ~~~ ## Backend (ThinkPHP5) ### 第一次安裝 在命令行，切換到你的WEB根目錄下面并執行下面的命令： ~~~bash $ composer create-project topthink/think=5.1.* tp5 ~~~ ### 已經安裝過 在命令行，切換到你的**應用根目錄**下面，然后執行下面的命令進行更新： ~~~bash $ composer update topthink/framework ~~~ >[info] * 更新操作會刪除框架核心目錄`thinkphp`并重新下載安裝新版本，但不會影響框架的`application`目錄，因此不要在框架核心目錄添加任何應用代碼和類庫。 > * 安裝和更新命令所在的目錄是不同的，更新必須在你的應用根目錄下面執行 如果瀏覽器輸出如圖所示：  表示已經完成`ThinkPHP5.1`的安裝！ ### 網站訪問設置 1. 網站域名訪問綁定 >[danger] 實際部署中，是綁定域名訪問到`public`目錄，確保其它目錄不在WEB目錄下面。 2. 前端編譯內容拷貝 將前端編譯好的文件（前端項目`/dist`目錄中的所有內容）copy到框架的`/public`目錄下。 3. 訪問路由設置 * TP5框架index模塊的index操作中返回前端入口文件 ~~~php // Index.php(路徑：/application/index/controller/Index.php) <?php namespace app\index\controller; use think\Controller; use think\facade\Config; use think\facade\Env; class Index extends Controller { public function index() { //絕對路徑指定模板文件main.html，也是前端入口文件 return $this->fetch(Env::get('ROOT_PATH') . '/public/main.html'); } } ~~~ * 路由設置 ~~~php // route.php(路徑：/route/route.php) <?php //首頁的路由 Route::get('/', 'index/index'); //設置全局MISS路由 Route::miss(function() { return '<br><h4 style="text-align:center"> 404 not found!</h4>'; }); return [ ]; ~~~ ### 命令行 通過命令行的方式執行一些URL訪問不方便或者安全性較高的操作。 在命令行下面，切換到應用根目錄（注意不是web根目錄），然后執行`php think` ~~~php $ php think Think Console version 0.1 Usage: command [options] [arguments] Options: -h, --help Display this help message -V, --version Display this console version -q, --quiet Do not output any message --ansi Force ANSI output --no-ansi Disable ANSI output -n, --no-interaction Do not ask any interactive question -v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug Available commands: build Build Application Dirs clear Clear runtime file help Displays help for a command list Lists commands run PHP Built-in Server for ThinkPHP version show thinkphp framework version make make:command Create a new command class make:controller Create a new resource controller class make:middleware Create a new middleware class make:model Create a new model class make:validate Create a validate class optimize optimize:autoload Optimizes PSR0 and PSR4 packages to be loaded with classmaps too, good for production. optimize:config Build config and common file cache. optimize:route Build route cache. optimize:schema Build database schema cache. route route:list show route list. ~~~ 系統自帶的幾個命令，包括： | 指令 | 描述 | | --- | --- | | build | 自動生成目錄和文件 | | help | 幫助 | | list | 指令列表 | | clear | 清除緩存指令 | | make:controller | 創建控制器文件 | | make:model | 創建模型文件 | | make:command | 創建指令文件（`V5.1.24+`） | | optimize:autoload | 生成類庫映射文件 | | optimize:config | 生成配置緩存文件 | | optimize:schema | 生成數據表字段緩存文件 | | version | 查看框架版本（`V5.1.20+`） | | route:list | 查看路由定義（`V5.1.24+`） | 更多的指令可以自己擴展。