vue项目初始化

1. 安装 3.x 版本的 Vue 脚手架：

npm install -g @vue/cli

基于3.x版本的脚手架创建vue项目

// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目

vue create my-project

// 2. 基于 图形化界面 的方式，创建 新版 vue 项目

vue ui

Element-UI 的基本使用

1. 基于命令行方式手动安装

①安装依赖包 npm i element-ui –S

②导入 Element-UI 相关资源

// 导入组件库

import ElementUI from 'element-ui';

// 导入组件相关样式

import 'element-ui/lib/theme-chalk/index.css';

// 配置 Vue 插件

Vue.use(ElementUI);

2. 基于图形化界面自动安装

①运行 vue ui 命令，打开图形化界面

②通过 Vue 项目管理器， 进入具体的项目配置面板

③点击 插件 -> 添加插件 ，进入插件查询面板

④搜索 vue-cli-plugin-element 并安装

⑤配置插件，实现按需导入，从而减少打包后项目的体积

安装依赖包 npm install

npm run dev 启动项目

接下来是一些常见的依赖包

1.webpack模块打包
    npm install –save-dev webpack

 

npm install axios --save-dev 和 npm install vue-axios --save-dev
安装完成后引入
1、在main.js文件中
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios)
 
2、添加到vue的原型属性上，同样是在main.js文件中
import axios from 'axios'
Vue.prototype.axios = axios
 
3、结合 Vuex的action
在vuex的仓库文件store.js中引用，使用action添加方法
import Vue from 'Vue'
import Vuex from 'vuex'
 
import axios from 'axios'
 
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'kimi'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/register',
        data: context.state.user
      })
    }
  }
})
 
export default store
 

babel-polyfill 把ES6语法转换成IE浏览器能读取的ES5语法，通常用来兼容IE浏览器，防止出现白屏现象

    npm install --save-dev babel-polyfill
     
    安装好后可以直接在main.js文件中引入
    import 'babel-polyfill'
    最好呢在webpack.base.config.js文件中修改
    entry: {
        app: ['babel-polyfill', './src/main.js']
      },