vue-cli3.0和element-ui的安装使用

一、利用vue-cli3快速搭建vue项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供如：serve、build 和 inspect 命令）

CLI 插件：给Vue 项目提供可选功能的 npm 包（如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）

1、全局安装过旧版本的 `vue-cli`(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g

2、安装vue-cli 3.0

Vue cli 3的包名称由 vue-cli 改成了 @vue/cli

npm install @vue/cli -g

3. vue-cli搭建脚本文件

以搭建一个项目名称为vue-test的Vue前端项目为例:

vue create vue-test

默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

根据提示进行相应的配置（以手动配置为例）（按 “空格键”选择/取消选择，A键全选/取消全选）：

3.1. 选择`Manually select features`

3.2. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）

3.3. 选择CSS预处理器语言:

SCSS、LESS

3.4. 选择ESLint的代码规范，此处使用 Standard代码规范

3.5. 选择何时进行代码检测，此处选择在保存时进行检测

3.6. 选择单元测试解决方案，此处选择 Jest

3.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

3.8 Save preset as: // 将预设另存为

SaveVue3.0

// 是的话项目命名假设为：SaveVue3.0

3.9. 配置完成后等待Vue-cli完成初始化

3.10. vue-cli初始化完成后，根据提示，进入到vue-test项目中，并启动项目

cd vue-test
npm run serve

4. vue.config.js配置

4.1 vue.config.js介绍

vue.config.js是一个可选的配置文件，如果项目的（和package.json同级的）根目录中存在这个文件，那么它会被@vue/cli自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照JSON的格式来写。

这个文件应该导出了一个包含了选项的对象

// vue.config.js
module.exports = {
  // 选项...
}

4.2. 配置代理

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

devServer

Type: Object
所有webpack-dev-server的选项都支持.注意：
- 有些值像host、port和https可能会被命令行参数覆写
- 有些像publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作

devServer.proxy

Type:string | object
devServer.proxy可以是一个指向开发环境API服务器的字符串：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

vue-cli2.0创建的项目的代理配置方式是修改config/index.js文件中的proxyTable:

vue-cli3.0的代理配置，直接将proxyTable中配置copy到devServer.proxy中即可：

module.exports = {
  devServer: {
    proxy: {
     '/hrm/api': {
        //target: 'http://192.168.1.209:10751/', // Dev环境
        //  target: 'http://192.168.1.238:10751/', // Test环境
        // target: 'http://192.168.1.215:10751/', // Rls环境
        target: 'http://192.168.1.218:10751/', // 正式环境
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite: true,
        pathRewrite: {
          '^/hrm/api/': '/'
        }
      }
    }
  }
}

4.3. 配置Webpack其他选项

参考：webpack简单的配置方式

调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象：

module.exports = {
  // 其他选项...
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
      //......
    ]
  }
}

注意：

有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

5. 升级已有项目到vue-cli 3.0版本

之前有考虑过通过将现有项目进行修改，安装@vue/cli以及相关的包，发现行不通。其实，最简单的方法，就是使用vue-cli 3.0，创建一个新的项目，然后将原有的项目的源码拷到新的项目中即可

使用vue-cli创建新的项目
删除新项目中src下的内容
将原有项目src中的源码拷贝到新项目的src中
将原有项目的index.html及favicon.ico拷贝到新项目的public中
将原有的*static文件夹也拷贝到新项目的public中
修改package.json、.babelrc等文件，保持和原有项目一致即可

build之后静态目录存放位置区别：

vue-cli 2.0：存放在 dist/static下
vue-cli 3.0：存放于 dist/assets 下

注意：

使用vue-cli 2.x版本创建的项目，放在static下的文件，build之后，是会拷贝到dist\static项目下的，所以，也必须要将static文件夹移到新项目的public文件夹中；会有放在static目录的，大部分是一些用于下载的，或者是大的图片、库等不需要编译的
2.0脚手架默认生成的静态文件是放在dist/static下，3.0默认升成的静态文件是放在 dist/assets下的，但是对于项目的升级来说，影响不大

如下图，原有项目的static中的histudy文件夹和wx.zip文件，编译后是会被拷贝到dist/static下的

vue-cli 3.0创建的项目，放在public目录的，编译时才会被拷贝到dist目录中，具体的配置方法，可以通过vue.config.js去配置，有兴趣的可以去研究研究
如下图：src中的**.vue等文件，编译后生成的 img/css/js文件夹，都会被拷贝到dist/assets中，public中的文件/文件夹会被拷贝到dist目录下。为了不修改原有项目的代码，直接将原项目的static文件夹拷贝到新项目的public下即可。

二、vue引入Element

1.打开cmd，进入到当前刚创建的vue项目目录

在当前目录中运行：

npm i element-ui -S

2.打开创建的项目文件夹

改变项目目录中的main.js文件；

初始main.js文件：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false;

3.然后在.vue文件里就直接可以用了

例如：在src/components/Hello.vue做一下修改

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

运行：npm run serve

成功！

https://www.jianshu.com/p/8105d6c16d80