vue2项目搭建

1安装 脚手架和打包工具 创建项目

npm install -g vue-cli

npm install -g webpack 
vue create 项目名

创建vue项目时报错：vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1

原因：没有添加环境变量

解决：

如果安装 nodejs 的时候没有修改默认安装位置，在 c 盘里搜索 vue.cmd；如果不清楚安装位置，在文件管理器全局搜索vue.cmd 。
右键选择“打开文件所在目录”，将vue.cmd的路径添加至系统环境变量path中。
此电脑>右键属性>系统设置>高级系统设置>环境变量，在系统变量中添加path。

2配置路由

1.安装 vue-router@3.5.1
2.创建 router文件夹 并创建 index.js
3.引入VueRouter 和 Vue
4.Vue.use(VueRouter)
5.创建VueRouter实例： const router = new VueRouter（{ routes}）

//1.导入VueRouter
import Vue from "vue";
import VueRouter from 'vue-router'
import HelloWord from "../components/HelloWorld.vue";
//2.使用路由
Vue.use(VueRouter);
//3.创建VueRouter的实例
const router = new VueRouter({
    //tips:不想要 #（锚点）就添加下面代码
     mode:'history', 
    //4.配置路由的path和组件
    routes :[
        {
          path: "/",
          name:'home',
          component: HelloWord,
        },
        {
          path: "/about",
          name:'anout',
          component: () => import("../components/About.vue"),
        },
      ]
})
//5.导入路由实例
export default router

import Vue from 'vue'
import App from './App.vue'
//6.引入导出的路由
import router from './router/index'

Vue.config.productionTip = false

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

 

 

 

3配置vuex

npm i vuex@3 --save

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 用来存储数据
const state = {

}
// 响应组件中的事件
const actions = {

}
// 操作数据
const mutations = {

}
// 用来将state数据进行加工
const getters = {

}
// 新建并暴露store
export default new Vuex.Store({
state,
actions,
mutations,
getters
})

 

在main.js中引入vuex

import Vue from 'vue'
import App from './App.vue'
import store from './store/index';

Vue.config.productionTip = false

new Vue({
render: h => h(App),
store
}).$mount('#app')

4安装element ui

npm i element－ui  －－save

然后在main.JS中vue.use（element－ui）

 

5详解mixins混入使用

一、什么是Mixins？
mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

二、什么时候使用Mixins？
当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

三、如何创建Mixins？
在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象