Vue使用总结

第一步、建立Vue工程

打开Vue-cli

选择一个文件夹

在地址栏输入cmd，回车打开命令行

输入vue ui

在浏览器中打开 http://localhost:8000

打开vue项目管理器

创建新项目

点击导航栏中的创建

在下面的“在此创建新项目”

接着按照下面的操作一步一步走，就可以完成项目的创建了

最后的项目工程有这些文件

第二步、完善项目配置

1.不同环境配置

在项目目录下创建vue.config.js文件

并输入下面内容

module.exports = {
    publicPath: "./",
    feaweif
    // 输出文件目录
    outputDir: process.env.outputDir,
};

更多配置请看Vue的官方说明：https://cli.vuejs.org/zh/config/

2.分别为不同环境配置不同的变量

• 开发环境

在项目目录下创建".env"文件，并输入一下内容

NODE_ENV = 'development' 
VUE_APP_MODE = 'development' 
VUE_APP_API_URL= 'http://127.0.0.1:8099'

• 生产环境

在项目目录下创建".env.production"文件，并输入一下内容

NODE_ENV = 'production' 
VUE_APP_MODE = 'production' 
VUE_APP_API_URL= 'https://4ilab.mycraipy.cn'

• 测试环境

在项目目录下创建".env.test"文件，并输入一下内容

NODE_ENV = 'production' 
VUE_APP_MODE ='test' 
VUE_APP_API_URL= 'http://4ilab.mycraipy.cn:8099'
outputDir = 'test'

3.添加测试环境和生产环境发布版本

修改项目目录下的package.json文件里的scripts为

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "buildtest":"vue-cli-service build --mode test",
    "publish": "vue-cli-service build && vue-cli-service build --mode test"
},

第三步、发布项目

创建输出文件

使用脚本命令build，编译项目

编译完成没有错的话，是这样子的

这时候在项目的dist文件夹下就会有下面的一些文件

我们使用浏览器打开index.html就可以查看网页了。

真正用于生产环境注意将 js 文件夹下的 *.map文件删除。

使用nginx部署

server{
	listen 80;
    server_name 4ilab.mycraipy.cn;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/4ilab/dist;
}

主要在nginx配置文件中修改几项参数

1.listen 监听端口

2.server_name 访问的域名，没有域名可以使用IP地址代替

3.root 就是dist文件夹所在的路径

常用库

axios

1.安装axios

npm install --save axios vue-axios 

2.在main.js中引入axios

import axios from "axios";
axios.defaults.headers.post["Content-Type"] =  "application/x-www-form-urlencoded;charset=utf-8";
axios.defaults.baseURL = process.env.VUE_APP_API_URL;

3.常用操作

get请求示例

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求示例

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

更多操作请前往官方文档：http://www.axios-js.com/zh-cn/docs/

element-ui

1.安装element-ui

npm i element-ui -S

2.引入element-ui

a.完整引入

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

b.按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babel.config.js 修改为：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件列表和引入方式（完整组件列表以 components.json 为准）

3.使用

参照官网的使用说明https://element.eleme.cn/#/zh-CN/component/installation

vue-router

1.安装

npm install vue-router

2.引入

新建router文件夹，并新建index.js，写入下面内容

import Vue from "vue";
import VueRouter from "vue-router";
import Index from "../views/index.vue";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
    meta: {
      title: "主页"
    }
  },
];

const router = new VueRouter({
  routes
});

export default router;

在main.js中引入

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

3.使用

参考官网地址https://router.vuejs.org/zh/guide/