vue脚手架项目搭建基础

安装nodejs

nodejs是vue-cli的依赖环境必须先进行安装

安装vue-cli

1.必须先安装nodejs
2.安装vue脚手架
npm install -g @vue/cli
npm install -g @vue/cli-init
3.初始化创建前端项目
vue init webpack projectname
4.按照提示设置项目的初始化信息
5.安装项目的所有依赖包
cd projectname
npm i
6.启动开发项目查看package.json文件
npm run dev
7.安装样式脚手架elementui
npm i element-ui --save
8.npm i axios --save

安装server给vue提供接口

1.安装express脚手架
npm install -g express-generator
2.创建express项目
express server -e
3.安装node项目依赖
npm i
4.安装nodemon
npm install -g nodemon
5.启动app
nodemon app

配置vue的跨域请求代理
config/index.js的proxyTable
修改配置后必须手动重启vue app

启动客户端和服务端app

1.启动客户端

2.启动服务端

3.访问浏览器

数据库集成工具搭建 XAMPP

nodejs连接mysql数据库

1.安装mysql模块 npm install mysql --save

var mysql=require("mysql");
var connection=mysql.createConnection({
    host : "127.0.0.1",
    user : "root",
    database : "vuems"
});

module.exports = connection;

connection.js

var express = require(\'express\');
var router = express.Router();
var conn=require("./conn");

conn.connect(()=>{
  console.log("数据库连接成功.....");
});
/* GET home page. */
router.get(\'/\', function(req, res, next) {
  res.render(\'index\', { title: \'Express\' });
});

router.post(\'/checklogin\', function(req, res, next) {
  let {uername,passwd} = req.body.params;
  console.log(req.body);
  console.log(uername);
  console.log(passwd);
  const sqlstr=`select * from users where username="${uername}" and password="${passwd}"`;
  conn.query(sqlstr,(err,data)=>{
    if(err)
    {
      res.send("sql query error");
    }
    else
    {
      res.send(data);
    }
  });
 
});


module.exports = router;

业务处理.js

Vue项目打包部署

1.执行 npm run buid 会在当前项目根目录下生成一个dist文件

2.把dist下的所有文件上传到nginx的html目录中

3.修改nginx的配置文件重新启动nginx 完成项目部署

vuex项目搭建

1.执行 vue create vuex-app

2.按空格键对需要安装的组件进行选择