**概要** | | 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+`） | 更多的指令可以自己扩展。