vue之脚手架

一起进步吧！感谢大家的支持和关注

前言

利用脚手架可以快速的搭建比较大的项目

一.环境安装

node.js

1.先查看本机node.js版本：
	node -v
	
2.清除node.js的cache：
	sudo npm cache clean -f

3.安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"
	sudo npm install -g n

4.安装最新版本的node.js
	sudo n stable

5.再次查看本机的node.js版本：
	node -v 
	
6.安装上node.js之后，自带了npm包管理工具，类似于Python中的pip。
如果想要更新npm到最新版，可以执行命令：
	sudo npm install npm@latest -g
7.npm淘宝源
npm config set registry https://registry.npm.taobao.org
8.全局安装vue-cli
# 安装（最新版）
sudo npm install -g @vue/cli

# 安装（指定版本）
sudo npm install -g @vue/cli@4.5.14

# 卸载
sudo npm uninstall -g @vue/cli

二.创建项目

cd 指定目录位置
vue create mysite
等待...

# 根据提示
cd supershop
npm run server
等待 ....

访问这两个任意一个网址都可以

项目到这里就创建成功了，可以用集成工具打开，pycharm或者webstorm

---

三.目录结构

- babel.config.js      babel是ES6转换ES5的组件，这是他所需的配置文件（一般不需要动）。
- package.json         项目所需的包的版本信息。
- package-lock.json    保存项目所需的包细节以及包的依赖等信息。
- node-modules         项目安装依赖包的文件保存的地方。例如：npm install axios 
                       axios包会保存在此目录、信息也会写在 package.json、package-lock.json中   
- src ****
	- main.js          项目的启动 npm run serve ，用户访问时程序的入门。****
	- App.vue		   主组件 ****
	- components       子组件
	- assets           静态文件（自己的静态文件，会被压缩和合并）
- public		      【此目录下的文件直接被复制到dist/目录下，一般放不动的数据，引入第三方】
	- index.html       主HTML文件（模板引擎）
	- favicon.icon     图标
- README.md            项目说明文档

安装包

cd 项目根目录
npm install xxx
npm install axios
npm install vue-axios

四.快速上手

1.axios组件 类似于ajax

1.安装组件 
npm install axios
npm install vue-axios

2.导入 main.js
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3.使用 
Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

2.router 组件

1.安装组件 
 npm install vue-router@3 
 

2.导入  //自己创建 src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'


import Home from '../components/Home'


Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: "Home",
            component: Home
        },
    ]
})

export default router

// main.js
 
import router from "./router"

new Vue({
    router: router,  //这里注册
    render: h => h(App),
}).$mount('#app') 

3.使用  到想用的vue文件中
<router-link to="/home">点我</router-link>
<router-view></router-view>
this.$router.push({name: 'Home'});

五.vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
就是将组件中需要共享的数据交给vuex来帮我们进行管理，例如：用户登录状态、加入购物车。

1.安装
npm install vuex@3

2.引入  main.js

import store from "./store"
new Vue({
    router: router,
    store: store, // 这里
    render: h => h(App),
}).$mount('#app')

创建src/store/index.js
// 这里就是一些公共的数据，全局都可以使用
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
    state: {   //就像data只不过是全局的
        isLogin: false, //是否登录
        userInfo: null //用户信息
    },
    mutations: {  //就像是methods
        login: function (state, info) {
            state.userInfo = info;
            state.isLogin = true;
        },
         addCar: function (state) {
            state.carNumber += 1;
        },
        fetchAsync: function (state) {
            // ajax
            setTimeout(function () {
                state.xxxxx += 1;
            }, 1000);

    },
    actions: {
     	increment (context) {
        	// 触发mutations
      		context.commit('increment')
 	   }
    }
})

3.使用
// 数据的使用
this.$store.state.isLogin
this.$store.state.userinfo

// mutations中的函数调用
// 1.用户登录 不用传state
this.$store.commit('login', this.info);
// 2.购物车
this.$store.commit("addCar");
// 其他，注意异步要放在action中
this.$store.commit("fetchAsync");

// action 中的函数触发
this.$store.dispatch('increment')

关于computed属性
在vue的组件中有一个computed属性（计算属性），监听关联的数据，如果发生变化则重新计算并显示

关于Action 异步时使用
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

六.flex布局

style样式中的一些东西

 display: flex;                    // 表示flex布局
 flex-direction: row;              // 主轴是横向，副轴是纵向。
 justify-content: flex-start;     /* 主轴=横向，横向从左开始 */
 justify-content: flex-end;       /* 主轴=横向，横向从右开始 */
 justify-content: space-between;   /* 主轴=横向，左右定格，中间元素等分空白 */
 justify-content: space-around;   /* 主轴=横向，所有元素等分空白 */
 justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */

 align-items: center;             /* 副轴=纵向，元素居中*/
 align-items: flex-start;         /* 副轴=纵向，元素顶部*/
 align-items: flex-end;           /* 副轴=纵向，元素底部*/

 flex-wrap: nowrap;              /*  不换行 */
 align-conten：center;           /* 用于控制多行元素的对齐方式 */
 order:0 ;                       /* 默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。*/
 flex-grow:0，                   /* 默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大 */

七.element-ui/plus

这玩意就是bootstrap框架那样的，就是写好的组件，快速开发

安装
npm install element-ui

// 引入 main.js
import ElementUI from 'element-ui';
// import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

// 使用
<el-button type="success"> xxx</el-button>
<el-button type="primary"> xxxx</el-button>

最终目录

八.编译部署

npm run build
将编译后的代码dist文件上传到自己的服务器 centos服务器
安装nginx + 配置 + 启动
安装
yum install nginx

配置
vim /etc/nginx/nginx.conf
# 找到这个位置
 server {
          # 项目目录
          root         /data/supershop;

启动
systemctl start nginx

访问

部署就完成了，前端的部署还是非常简单的，这里也只是简单的部署

小结

关于vue项目的基本组件都搭建好了，后面直接用这个去开发。

---