下载vuethink,git clone https://github.com/honraytech/VueThink.git
,下载好后能够看到VueThink目录中有frontEnd和php,frontEnd是vue-cli脚手架搭建的前端模块,php里面是thinkphp5框架php
DocumentRoot "E:\wamp\www\VueThink" ServerName vt.com
新建一个数据库,将php下的install.sql
导进新建的数据库,而后配置php下的config/database.php
;配好后打开浏览器访问http://vt.com/php/
,若是看到‘vuethink接口’的字样就是成功了html
打开frontEnd/src/main.js
前端
// 将HOST改为后台地址 axios.defaults.baseURL = 'http://vt.com/php/index.php' window.HOST = 'http://vt.com/php/index.php'
配置完后在frontEnd
中npm run dev
运行开发版(localhost:8080或者vt.com:8080),npm run build
打包发布版,将build生成的dist下的static
目录和index.html
拷贝至VueThink
目录下,在浏览器输入vt.com就能够访问了vue
你可能遇到eslint的疯狂报错,打开frontEnd/build/webpack.base.conf.js
,将eslint配置注释掉node
eslint: { // configFile: './.eslintrc.json' }, module: { preLoaders: [ // { // test: /\.js$/, // exclude: /node_modules/, // loader: 'eslint' // }, // { // test: /\.vue$/, // exclude: /node_modules/, // loader: 'eslint' // } ],
这是vue-router的history模式的问题,在VueThink下建个.htaccess
文件,保存下面配置webpack
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>
若是不是Apache请查看详细文档,或者直接将路由模式改回默认的hash模式(若是对路由不讲究的话)ios
const router = new VueRouter({ mode: 'hash', base: __dirname, routes })
VueThink php // tp5 frontEnd // 开发版、脚手架 static // 打包后的静态资源 index.html // 打包后的入口文件 .htaccess // 配置文件