<>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

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信