创建一个Vue项目

1、下载安装Node.js

下载地址：https://nodejs.org/en/download/ ，选择合适自己的版本下载即可。

具体怎么安装Node.js就不用具体说明了，安装Node.js会默认安装npm（包管理工具）。

2：查看node的版本号
下载好node之后，以管理员身份打开cmd管理工具，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。
输入命令： node -v
3：安装淘宝npm镜像
由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4：安装全局vue-cli脚手架
淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
输入命令：cnpm install --global vue-cli
5：初始化一个vue项目
vue init webpack ceshiproject
运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。
6：安装 elementUI
npm i element-ui -S
注意：安装过程中出现这样的bug的时候，需要解决

image.png

解决办法：尝试删除项目中的 package-lock.json 文件和 node_modules 文件夹，然后再尝试 npm install.
7:在src/mian.js中引用element-ui：

image.png

运行报错：在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则

rules: [
   //...(config.dev.useEslint ? [createLintingRule()] : []), // 注释或者删除
   {
     test: /\.vue$/,
     loader: ‘vue-loader‘,
     options: vueLoaderConfig
   },
   ...
   }
 ]

自定义一个使用element-ui的component，替换掉默认的HelloWorld组件。
在component文件下，复制HelloWorld.vue并重命名为EnterPage.vue。修改EnterPage.vue的内容：

image.png
在router/index.js中添加访问EnterPage component的url：

image.png

路由懒加载：

{
     path: '/enter',
     component: resolve => require(['../components/EnterPage'], resolve),
     meta: { title: 'CRF审核' }
   },

10：npm run dev 访问http://localhost:8080/#/enter查看element-ui是否显示：

image.png

安装并引用axios
$cnpm install --save axios
在入口函数main.js中引用axios：


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import Axiso from 'axios'
import router from './router/index'
import qs from 'qs'
import Bus from './assets/utils/bus'
import store from './assets/utils/store'
import base from './assets/utils/base'
import baseService from './assets/utils/baseService'
import enumSys from './assets/utils/enum'
import echarts from 'echarts'
import {Calendar} from 'ant-design-vue'


Vue.use(Calendar)
Vue.use(ElementUI);

import './assets/style/base.css'
import './assets/style/icon.css'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app');

Vue.prototype.$axios = Axiso;
Vue.prototype.$qs = qs;
Vue.prototype.$bus = Bus;
Vue.prototype.$base = base;
Vue.prototype.$baseService = baseService;
Vue.prototype.$enumSys = enumSys;
Vue.prototype.$echarts = echarts;

用法

 // 查看维度数据
     initProject(ProjectId){
        this.$axios({
          method: 'post',
          url: this.$baseService.getApi()+ 'Home/GetLoginInfo',
          data: this.$qs.stringify({ProjectId:ProjectId})
        }).then(res => {
          if(res.data.Success == true){
           this.$message({
              message: '请求成功！',
              type: 'error'
            });
          }else{
            this.$message({
              message: '未找到相关项目信息！',
              type: 'error'
            });
          }
        })
        .catch(res => {
          this.tableLoading = false;
          this.$message.error("网络错误，请联系管理员");
        });
      },

最后编辑于：2020.02.25 18:14:49