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

最新推荐文章于 2024-04-04 06:22:19 发布

原创最新推荐文章于 2024-04-04 06:22:19 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

13 篇文章

订阅专栏

node+vue+mysql

6 篇文章

订阅专栏

mysql

4 篇文章

订阅专栏

本文详细介绍了在Win7系统中，如何一步步安装node.js、vue（通过webpack-simple）、mysql以及navicat。内容包括每个组件的下载、安装过程，如配置环境变量、安装npm、创建vue项目、设置mysql的远程访问权限等，同时提供了安装过程中可能遇到问题的解决方案。

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

1、安装node

下载地址：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
确保node已安装，因为需要使用npm：

npm install --global vue-cli    
//全局安装vue-cli

vue -V    
//-V的V大写，检查是否安装成功，或者不知道自己是否安装了vue的情况下可以执行该命令检查本机环境是否有安装vue

全局安装vue后，便可以创建vue项目。

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

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

参考地址：https://blog.youkuaiyun.com/zhouzhiwengang/article/details/80589420

1.下载地址：https://dev.mysql.com/downloads/mysql/ 我选择是5.7的版本，具体后面的配置信息可以根据自己的版本号修改
在这里插入图片描述

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

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

这步包含两个操作：
1、在系统变量中选择新建，然后填入以下信息（不含bin）
在这里插入图片描述

2、在系统变量中找到path属性的变量信息，点击编辑然后将以下信息填入
在这里插入图片描述

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      
	输出如果报错根据报错网上查询 
	报错：计算机丢失MSVCP120.dll
	按照链接第7步下载安装即可，前面的可以先不用下载
	参考链接：https://jingyan.baidu.com/article/93f9803f0c599ae0e46f558a.html

输出结果会显示以下代码，则表示成功：

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 '新的密码';

如果报错ERROR 1290的错误信息
执行 flush privileges; 后再重新执行以上命令即可。

9.登录mysql时忘记密码的情况下

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.youkuaiyun.com/slfkj/article/details/79291905

11.设置允许远程访问：

登录mysql后输入以下命令：

use mysql;
select host,user from user;
create user ‘root’@’%’ identified by ‘123456(根据自己之前设置的密码修改)’;
grant all on . to root@’%’ identified by ‘123456(根据自己之前设置的密码修改)’;
exit;

https://blog.youkuaiyun.com/deanwq/article/details/70575195

12.关闭防火墙：

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

13.mysql安装与卸载全过程：
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文件执行。

双击 exe 文件后出现很多dll文件报错的话可能是与本地的杀毒软件有冲突，先关闭这些软件，再安装执行。

安装成功后连接mysql步骤参考以下连接：

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