node+vue+webpack(webpack-simple)+mysql使用历程之一（安装，win7） - 好文

<>node+vue+webpack(webpack-simple)+mysql安装

<>1、安装node

下载地址：https://nodejs.org/en/ <https://nodejs.org/en/> (下载第一个选项就行)

node安装：
双击下载好的安装包
安装过程基本上直接点击next就可以，引导步骤会将安装目录添加到PATH环境变量中。
其中涉及到软件安装在哪一个文件夹下可以根据自己的习惯修改(我的在D盘)，
node测试：
打开cmd窗口，输入：node -v ，回车，返回版本号列如：v8.11.3（安装成功）。
npm 安装：
由于新版的node已经集成了 npm，所以不需要再进行安装了，可以直接使用了。
npm测试：
打开cmd窗口，输入：npm -v，测试npm是否成功安装，返回版本号例如：5.60(安装成功)

<>2、安装vue

参考地址：https://www.cnblogs.com/binmengxue/p/6831850.html
<https://www.cnblogs.com/binmengxue/p/6831850.html>
确保node已安装，因为需要使用npm：
npm install --global vue-cli //全局安装vue-cli vue -V
//-V的V大写，检查是否安装成功，或者不知道自己是否安装了vue的情况下可以执行该命令检查本机环境是否有安装vue
全局安装vue后，便可以创建vue项目。

<>3、安装mysql (安装环境是：win7 + x64)

在安装包下载好的前提下：用时4个小时左右，涉及到查询报错及解决

参考地址：https://blog.csdn.net/zhouzhiwengang/article/details/80589420
<https://blog.csdn.net/zhouzhiwengang/article/details/80589420>

1.下载地址：https://dev.mysql.com/downloads/mysql/
<https://dev.mysql.com/downloads/mysql/> 我选择的版本是8.0.11 ZIP Archive.

2.下载后的压缩包直接解压在自己需要的盘里就可以，我的解压在D盘下
解压后的文件打开内容如下：

3.win7系统需要配置mysql环境变量
参考地址：https://jingyan.baidu.com/article/0964eca25903618285f53602.html
<https://jingyan.baidu.com/article/0964eca25903618285f53602.html>
该链接中只需参考环境变量的配置步骤3即可，截图如下：

4.在mysql的根目录下新建文件：my.ini (后缀名记得改成ini格式)
将以下内容粘贴进去即可：
[mysqld] basedir=D:\\software\\mysql-8.0.11 路径位置根据自己自身修改
datadir=D:\\software\\mysql-8.0.11\\data port=3306
5.以管理员身份运行 cmd
①win7系统下：
开始–>所有程序–>附件–>命令提示符(右键)–>以管理员身份运行。
②win7系统下：
在 C:\Windows\System32该路径下找到cmd的运行软件，右键->以管理员身份运行，切换到D 盘( MySQL 解压后所在的盘
)，cd进入mysql所在文件夹内，然后再进入bin目录下，输入以下命令：
mysqld -install 输出如果报错根据报错网上查询
输出结果会显示以下代码，则表示成功：
Service successfully installed.
6.然后输入
mysqld --initialize
然后运行成功后打开mysql所在文件夹，查看根目录下应该会多一个data 文件夹。

7.启动mysql服务（在bin目录下）
net start mysql
8.登录mqsql（在bin目录下）
mysql -u root -p
运行后会出现以下语句(需要输入密码)：
Enter password:

此时需要mysql自动生成的初始密码。在mysql的根目录下找到data文件夹打开，找到后缀名为.err的文件用记事本打开，文件内搜索password后找到密码所在位置：

紧接上步骤输入密码后回车。当输出一下语句时则表示配置成功：
Welcom to the MySQL monitor. Commands end with ; or \g ......
输入以下命令修改初始密码方便记忆：
ALTER USER 'root'@'localhost' IDENTIFIED BY '新的密码';
9.登录mysql时忘记密码的情况下

https://www.cnblogs.com/hpcpp/p/7353985.html
<https://www.cnblogs.com/hpcpp/p/7353985.html>

10.mysql中默认的数据库

连接上本地mysql后，查看新装的mysql中会有几个默认的数据库

* information_schema–信息数据库，

是mysql系统用的所有字典信息，包括数据库系统有什么库，有什么表，有什么字典，有什么存储过程等所有对象信息和进程访问，状态信息，一旦删除，该数据库系统将无法使用。
* mysql–是保存系统有关的权限，对象和状态信息，不能删除。
* performance_schema–mysql 5.5 版本新增了一个性能优化的引擎，
PERFORMANCE_SCHEMA这个功能默认是关闭的
参考地址：https://blog.csdn.net/slfkj/article/details/79291905
<https://blog.csdn.net/slfkj/article/details/79291905>

11.设置允许远程访问：

登录mysql后输入以下命令：

use mysql;
select host,user,password from user;
create user ‘root’@’%’ identified by ‘123456’;
grant all on . to root@’%’ identified by ‘123456’;
exit

https://blog.csdn.net/deanwq/article/details/70575195
<https://blog.csdn.net/deanwq/article/details/70575195>

12.关闭防火墙：

当设置远程访问之后仍无法打开远程访问，首先考虑是否是防火墙的原因。

参考地址：https://www.jb51.net/article/103770.htm
<https://www.jb51.net/article/103770.htm>

13.mysql安装与卸载全过程：
http://www.cnblogs.com/sleipnir-0430/p/8453974.html
<http://www.cnblogs.com/sleipnir-0430/p/8453974.html>

<>4、安装navicat (安装环境是：win7 + x64)

* 作用：可视化操作mysql
* 官方解释：Navicat
MySQL是一个强大的MySQL数据库服务器管理和开发工具。它可以与任何3.21或以上版本的MySQL一起工作，并支持大部分的MySQL最新功能，包括触发器、存储过程、函数、事件、视图、管理用户，等等。它不仅对专业开发人员来说是非常尖端的技术，而且对于新手来说也易学易用。其精心设计的图形用户界面（GUI），Navicat
MySQL可以让你用一种安全简便的方式快速并容易地创建，组织，访问和共享信息。
安装文件存在个人网盘上，安装方法根据压缩包内TXT文件执行。
安装成功后连接mysql步骤参考以下连接：

https://jingyan.baidu.com/article/335530daf8443b19cb41c3db.html
<https://jingyan.baidu.com/article/335530daf8443b19cb41c3db.html>

<>5、vue构建项目

以下步骤为创建vue项目流程：

1、使用vue创建项目：
//webpack构建项目(两者选其一) vue init webpack my-project //webpack-simple构建项目(两者选其一)
vue init webpack-simple my-project //在自己需要创建项目的目录下执行命令，项目名称不能有大写。 //注：vue-cli
的模板包括 webpack 和 webpack-simple。 //webpack 是比较复杂专业的项目，他的配置并不全放在根目录下的
webpack.config.js 中。 //webpack-simple 相对简单的，它根目录下才有个
webpack.config.js，项目配置基本在该文件中。
2.1、项目建立过程中注意点(webpack构建项目)：
除了需要注意的一步选择No以外，其他步骤都可以直接回车快速选择yes！根据最后提示的命令进行后续下载操作。

2.2、项目建立过程中注意点(webpack-simple构建项目)：
全部选择回车就可以！根据最后提示的命令进行后续下载操作。

3.1、项目安装成功后查看目录结构(webpack)

3.2、项目安装成功后查看目录结构(webpack-simple)

4.1、配置项目IP地址及port端口号(webpack)

config/index.js
dev: { env: require('./dev.env'), ...... // Various Dev Server settings host:
'192.168.x.xxx', // IP地址 port: 8080, // 端口号 ...... }
4.2、配置项目IP地址及port端口号(webpack-simple)

webpack.config.js
devServer: { ...... host: "192.168.x.xxx", port: 8080, ..... },
5.运行vue，打开项目：
npm run dev

热门工具换一换