（一）Vue项目——轻社区：搭建开发环境

目录

搭建开发环境

1.配置虚拟主机

2.创建ThinkPHP项目

3.安装Node.js和npm

4.创建前端项目

5.安装sass

6.安装Bootstrap

---

搭建开发环境

1.配置虚拟主机

配置虚拟主机，打开C:\web\apache2.4\conf\extra\httpd-vhosts.conf。

添加以下代码。

<VirtualHost *:80>

    DocumentRoot "C:/web/www/lightbbs/public"

    ServerName www.lightbbs.test

    ServerAlias lightbbs.test

</VirtualHost>

<Directory "C:/web/www/lightbbs">

    Options -indexes

    AllowOverride All

    Require local

</Directory>

重启Apache使配置生效。

用管理员身份打开记事本，修改hosts文件C:\Windows\System32\drivers\etc\hosts。

127.0.0.1 www.lightbbs.test

127.0.0.1 lightbbs.test

2.创建ThinkPHP项目

创建项目目录C:\web\www\lightbbs，然后使用VSCode编辑器打开它。

为VSCode安装EditorConfig for VS Code、PHPIntelliSense、phpcs、php cs fixer扩展，用于进行PHP开发。

安装phpcs扩展后，还需要执行如下命令。

composer global require squizlabs/php_codesniffer

安装后需要重新启动VSCode编辑器才会生效。

创建ThinkPHP 5.1项目。

composer create-project topthink/think=5.1 .

然后配置VSCode编辑器。

创建.vscode\settings.json

{

    "php.suggest.basic": false,

    "php.executablePath": "C:/web/php7.2/php.exe",

    "phpcs.standard": "psr2",

    "phpcs.ignorePatterns": ["database", "thinkphp", "runtime", "public", "vendor"],

    "files.eol": "\n"

}

创建.editorconfig

[*.php]

indent_style = space

indent_size = 4

[*.html]

indent_style = space

indent_size = 2

[*.js]

indent_style = space

indent_size = 2

最后配置数据库。

登录MySQL，创建项目的数据库。

CREATE DATABASE `lightbbs`;

创建ThinkPHP的环境变量文件.env。

[app]

debug = true

trace = false

[database]

hostname = '127.0.0.1'

database = 'lightbbs'

username = 'root'

password = '123456'

hostport = '3306'

prefix = 'bbs_'

修改config\database.php，读取配置。

'hostname' => Env::get('database.hostname', '127.0.0.1'),

'database' => Env::get('database.database', ''),

'username' => Env::get('database.username', 'root'),

'password' => Env::get('database.password', ''),

'hostport' => Env::get('database.hostport', ''),

'charset' => Env::get('database.charset', 'utf8mb4'),

'prefix' => Env::get('database.prefix', ''),

3.安装Node.js和npm

npm（Node Package Manager）是Node.js提供的JavaScript包管理工具（package manager），它的功能与PHP的Composer相似，可用于管理JavaScript代码依赖。

在Node.js官方网站https://nodejs.org下载Node.js进行安装，将Node.js安装后，就可以使用npm命令了。执行“npm -v”即可看到当前npm的版本信息。

npm需要到国外网站下载文件，下载速度比较慢，为此，可以为npm配置国内的镜像服务器来加速。在命令行中执行如下命令。

npm config set registry=https://registry.npm.taobao.org

另外，如果需要，还可以更改Node.js的prefix（全局）和cache（缓存）路径。

npm config set cache "D:\nodejs\node_cache"

npm config set prefix "D:\nodejs\node_global"

4.创建前端项目

创建前端项目目录C:\web\www\vue_lightbbs，然后使用VSCode编辑器打开它。

安装Vue脚手架。

npm install @vue/cli@3.10 -g

安装Vue.js。

npm install vue@2.6.11 --save

在VSCode编辑器中安装vetur扩展，用于支持vue开发。

创建.vscode\settings.json文件。

{

  "vetur.format.defaultFormatter.js": "vscode-typescript",

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  "vetur.format.defaultFormatter.html": "js-beautify-html",

  "vetur.format.defaultFormatterOptions": {

    "js-beautify-html": {

      "wrap_line_length": 120,

      "wrap_attributes": "auto",

      "end_with_newline": false

    }

  }

}

创建.editorconfig文件，为VS Code编辑器配置代码风格。

[*.{js,jsx,ts,tsx,vue}]

indent_style = space

indent_size = 2

trim_trailing_whitespace = true

insert_final_newline = true

启动cmd，创建项目。

cd C:\web\www\vue_lightbbs

vue create .

会出现下面的提示。

默认选择Y，直接按回车即可。

选择default进行创建。

启动项目。

npm run serve

访问测试。

http://localhost:8080/

页面效果：

5.安装sass

在前端项目启动已经后，先按Ctrl+C停止项目。

执行这些安装sass的相关命令。

（有些node.js版本太高可能不兼容导致安装sass出错或失败，建议用10版本试试，不行再试试14版本的）

npm install sass-loader@8.0 --save-dev

npm install node-sass@4.13 --save-dev

npm install sass@^1.3.0 --save-dev

npm install fibers@>= 3.1.0 --save-dev

6.安装Bootstrap

然后安装Bootstrap。

npm install bootstrap@4.3 --save

由于Bootstrap还依赖jQuery和popper，所以再来把这两个依赖装一下。

npm install jquery@3.4.1 --save

npm install popper.js@^1.14.7 --save

安装之后，创建vue.config.js文件，为Webpack配置jQuery。

const webpack = require('webpack')

module.exports = {

  configureWebpack: {

    plugins: [

      new webpack.ProvidePlugin({

        $: 'jquery',

        jQuery: 'jquery',

        'window.jQuery': 'jquery',

        Popper: ['popper.js', 'default']

      })

    ]

  }

}

然后在main.js文件中引入Bootstrap。

import Vue from 'vue'

import App from './App.vue'

import 'bootstrap'

import "bootstrap/dist/css/bootstrap.css"

……（原有代码）

启动项目。

npm run serve

通过下面的步骤，测试一下jQuery和Bootstrap是否可用了。

打开src\components\HelloWorld.vue，将原有代码全部删除，添加如下代码。

<template>

  <div class="content-wrap">

    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="tooltip">test</button>

  </div>

</template>

<script>

import $ from 'jquery'

export default {

  mounted () {

    $('[data-toggle="tooltip"]').tooltip()

  }

}

</script>

启动项目，刷新网页，页面中就会显示按钮。

鼠标滑过或单击按钮会显示工具提示：

下期见！！！关注我噢，嘿嘿~~~