一、安装node环境

  1、下载地址为:https://nodejs.org/en/

  2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功

        

  3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/

  输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

    

   检查是否安装成功:

    

二、搭建vue项目环境

  1、全局安装vue-cli

  npm install --global vue-cli

    

三、使用npm安装依赖

   进入frontEnd目录,执行命令安装依赖:npm install

   这里依赖包安装会出现以下警告  

     

    因为这里面包含了ios一些包的依赖所以这里如果你是ios则不用关注,如果你win则需要到package-lock.json中将fsevents包全部删除或者注释 

     

     

     此外还要修改项目根目录下有.eslintrc.js文件,在配置文件中修改rule配置项:

           'linebreak-style': 'off' 

     现象:
            js文件全体报红,不影响项目启动,出现原因是eslint语法检测     

四、前端配置及运行

  打开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就可以访问了。

六、后端搭建

   1、搭建PHP环境(版本5.6以上),将PHP文件夹上传覆盖。

   2、新建一个数据库,将php下的install.sql导进新建的数据库,然后配置php下的config/database.php。

   3、配好后打开浏览器访问http://vt.com/php/,如果看到‘vuethink接口’的字样就是成功了。

七、环境配置

    在VueThink下建个.htaccess文件,保存下面配置。(此配置信息是apache下)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

八、最终的文件结构

VueThink
      php // tp5
      frontEnd // 开发版、脚手架
      static // 打包后的静态资源
      index.html // 打包后的入口文件
      .htaccess // 配置文件

如果您在使用和学习的过程中,有不明白的地方,欢迎联系博主学习讨论。晋网在线设计竭诚为您服务。www.blog.jw778.com