初始化一个vue项目的流程

原创
2017/10/13 01:00
阅读数 309

一、安装 nodejs

建议安装 v 7.9.0 本人使用的此版本比较好

二、安装 安装vue、创建vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

三、安装 iView

前端组件,用于快速开发

# npm 安装
$ npm install iview --save

引入 iView

一般在 webpack 入口页面 main.js 中如下配置:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';    // 路由挂载
import Routers from './router.js';       // 路由列表
import iView from 'iview';
import 'iview/dist/styles/iview.css';    // 使用 CSS

Vue.use(VueRouter);
Vue.use(iView);

// 路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

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

四、安装vue-router 2

路由处理机制

NPM

npm install vue-router

如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

使用

在scr/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld');

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    }
  ]
})

五、安装vuex

NPM

npm install vuex --save

创建目录结构

- src

    -- store

        --- index.js

        --- Public

            ---- action.js

            ---- getters.js

            ---- index.js

            ---- mutations.js

            ---- state.js

store - index.js

import Vue from 'vue'
import vuex from 'vuex'
import Public from './Public'

Vue.use(vuex);

let Store = new vuex.Store({
    modules: {
        Public
    }
})

export default Store

store - Public - action.js

export default {
    
}

store - Public - getters.js

export default {
    
}

store - Public - index.js

import actions from './action.js'
import getters from './getters.js'
import mutations from './mutations.js'
import state from './state.js'

export default {
    actions,
    getters,
    mutations,
    state
}

store - Public - mutations.js

export default {
    
}

store - Public - state.js

export default {
    test: '测试数据,调用缓存里静态变量',
}

调用

main.js 导入 store

// 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 App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'

Vue.config.productionTip = false

Vue.use(iView)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

组件里

<template>
  <div class="hello">
    {{test}}
  </div>
</template>

<script scoped>
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed:{
    ...mapState({
      test:store => store.Public.test
    })
  }
}
</script>

六、安装axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

npm

npm install axios --save

src 文件夹下添加 api/index.js

import axios from 'axios'
import qs from 'qs'


let toLogin = () => {
    MessageBox('提示', '您还没有登录,请先登录');
    router.push({ name: 'Hello' })
}
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 10000;

axios.interceptors.request.use(
    function (config) {
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

axios.interceptors.response.use(
    function (res) {

        if (res.data && res.data.status == "401") {
            toLogin();
        }
        if (res && res.data && res.data.status != "200") {
            res.data.data = {

            };
        }
        return res;
    },
    function (error) {
        return Promise.reject(error);
    }
);

export default {
    get: (urlName = '', params = {}) => {
        return axios.get(
            urlName,
            {
                params: params
            }
        ).then((res) => {
            return res.data;
        })
    },
    post: (urlName = '', params = {}) => {
        return axios.get(
            urlName,
            qs.stringify(params)
        ).then((res) => {
            return res.data;
        })
    }
}

main.js 中导入 api/index.js

// 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 App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'
import Api from './api'

Vue.config.productionTip = false

Vue.use(iView)
Vue.prototype.$ajax = Api;

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: { App }
})

在config 文件夹下 的 index.js文件中添加 端口转发 proxyTable

  dev: {
    env: require('./dev.env'),
    port: process.env.PORT || 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://rapapi.org/mockjsdata/20113/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    cssSourceMap: false
  }

程序中调用

<template>
  <div class="hello">
    测试MadDragon
  </div>
</template>

<script scoped>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$ajax.get('custom/operateproblem/getOperateProblemList').then((e) => {
       console.log(e)
      })
    }
  }
}

七、安装moment.js

JavaScript 日期处理类库

npm

npm install moment --save   # npm

单个组件内使用

<template>
  <div class="hello">
    测试MadDragon
  </div>
</template>

<script scoped>
import moment from 'moment'

export default {
  data() {
    return {}
  },
  mounted() {
    console.log(moment().format('YYYY-MM-DD'))
    console.log(moment().format('x'))
  },
}
</script>

全局导入使用

在main.js 中

// 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 App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'
import Api from './api'
import moment from 'moment'

Vue.config.productionTip = false

Vue.use(iView)

Vue.prototype.$ajax = Api;
Vue.prototype.$moment = moment;

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: { App }
})

组件中使用

<template>
  <div class="hello">
    测试MadDragon
  </div>
</template>

<script scoped>

export default {
  data() {
    return {}
  },
  mounted() {
    console.log(this.$moment().format('YYYY-MM-DD'))
    console.log(this.$moment().format('x'))
  },
}
</script>

八、使用sessionStorage

浏览器缓存

src 下创建 sessionStorage/index.js 文件

const setItem = (key, data) => {
    if (!data || !key) return;
    sessionStorage.setItem(key, JSON.stringify(data));
}

const getItem = (key) => {
    if (!key) return;
    let data = sessionStorage.getItem(key);

    if (!data) return;
    return JSON.parse(data);
}

const removeItem = (key) => {
    if (!key) return;
    sessionStorage.removeItem(key);
}

const OPL = 'operateProblemList';
export const opl = {
    set: (data) => { setItem(OPL, data) },
    get: () => { return getItem(OPL) },
    remove: () => { removeItem(OPL) }
}

使用

移除、设置

import { opl } from '@/sessionStorage/index'
export default {
    setOperateProblemList(state, data) {
        opl.remove()
        opl.set(data)
    }
}

获取

import { opl } from '@/sessionStorage/index'
export default {
    test: '测试数据,调用缓存里静态变量',
    operateProblemList:opl.get(),
}

九、配置UEditor富文本编辑器

1、下载 jsp 或 php

下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹,里面包含的内容如下:

image

除了jsp的文件夹之外,其余的文件和文件夹复制到前端项目中的static用于存放静态文件的目录下,结构如下:

image

这里特别说明jsp目录下的资源为何不放进来,因为我们是vue搭建的项目,jsp页面肯定是不会放在前端的项目中的,包括config.json也放在后端用于解析,这里后面会解释这样做的原因。

2、修改配置

uedior 配置文件相关根目录: src/assets/utf8-php/ueditor.config.js 中将 window.UEDITOR_HOME_URL = "/static/utf8-php/";

3、在 main.js 中引入

import '../static/utf8-php/ueditor.config'
import '../static/utf8-php/ueditor.all.min'
import '../static/utf8-php/lang/zh-cn/zh-cn'
import '../static/utf8-php/ueditor.parse.min'

4、创建公共组件

\src\components\ue\index.vue

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      },
      id: {
        type: String
      },
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor(this.id, this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

5、调用

\src\views\editor\editor.vue

<template>
  <div class="components-container">
    <button @click="getUEContent()">获取内容</button>
    <div class="editor-container">
      <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
    </div>
  </div>
</template>
<style>
  .info{
    border-radius: 10px;
    line-height: 20px;
    padding: 10px;
    margin: 10px;
    background-color: #ffffff;
  }
</style>
<script>
  // import UE from '@/components/ue/ue.vue';
  import UE from '../../components/ue'
  export default {
    components: {UE},
    data() {
      return {
        defaultMsg: 'editor.vue?5c45:42 <p style="text-align: left; margin-bottom: 5px;">这里是U</p><p style="text-align: center; margin-bottom: 5px;"><img src="/ueditor/php/upload/image/20171015/1508063519822204.jpg" title="1508063519822204.jpg"/></p><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p style="line-height: normal; margin-bottom: 10px;"><img src="/ueditor/php/upload/image/20171015/1508063519100952.jpg" title="1508063519100952.jpg"/><img src="http://img.baidu.com/hi/jx2/j_0047.gif"/><img src="http://img.baidu.com/hi/jx2/j_0029.gif"/>szdfs18:44:04</p></li><li><p style="margin-bottom: 5px;">sdfsd</p></li><li><p style="margin-bottom: 5px;">sdf</p></li></ol><p style="margin-bottom: 5px;">sdf<br/></p><pre class="brush:php;toolbar:false;">h</pre><p style="margin-bottom: 5px;"><br/></p><p style="margin-bottom: 5px;"><br/></p><pre class="brush:diff;toolbar:false">sssfsdsdfsdfsdfsdf</pre><p><br/></p><p><br/></p><p style="margin-bottom: 5px;">E测试<br/></p>',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        ue1: "ue1", // 不同编辑器必须不同的id
      }
    },
    methods: {
      getUEContent() {
        let content = this.$refs.ue.getUEContent(); // 调用子组件方法
        // this.$notify({
        //   title: '获取成功,可在控制台查看!',
        //   message: content,
        //   type: 'success'
        // });
        console.log(content)
      }
    }
  };
</script>

6、配置路由

\src\router\index.vue

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Hello = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'Hello');
const editor = r => require.ensure([], () => r(require('@/views/editor/editor')), 'editor');

const courses = r => require.ensure([], () => r(require('@/views/selective/courses')),'courses')

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/ue',
      name: 'ue',
      component: editor
    },
    {
      path: '/courses',
      name: 'courses',
      component: courses
    }
  ]
})

7、配置 图片上传服务

将UEditor项目中地 jsp / php 单独搭建服务跑起来 我用地php 所以这里将展示php相关操作

nginx 配置(已有完成php运行环境,没有请先搭建)

# E:\web\ueditor\php
	# 图片上传PHP程序
	server {
		listen		6004;
		server_name	127.0.0.1;


		location / {
			root	E:/web/ueditor/php;
			index	index.html index.htm index.php;
			#访问路径的文件不存在则重写URL转交给ThinkPHP处理  
			if (!-e $request_filename) {  
			   rewrite  ^/(.*)$  /index.php/$1  last;  
			   break;  
			}  
		}

		error_page   500 502 503 504  /50x.html;

		location = /50x.html {
			root	E:/web/ueditor/php;
		}

		location ~ \.php {
			root	E:/web/ueditor/php;
			fastcgi_pass	127.0.0.1:9000;
			fastcgi_index	index.php;
			#加载Nginx默认"服务器环境变量"配置  
			include        fastcgi.conf;  
			  
			#设置PATH_INFO并改写SCRIPT_FILENAME,SCRIPT_NAME服务器环境变量  
			set $fastcgi_script_name2 $fastcgi_script_name;  
			if ($fastcgi_script_name ~ "^(.+\.php)(/.+)$") {  
			    set $fastcgi_script_name2 $1;  
			    set $path_info $2;  
			}  
			fastcgi_param   PATH_INFO $path_info;  
			fastcgi_param   SCRIPT_FILENAME   $document_root$fastcgi_script_name2;  
			fastcgi_param   SCRIPT_NAME   $fastcgi_script_name2;  
		}
	}

	#selective-courses-syste
	server {
		listen       6005;
		server_name  192.168.2.213;
		#selective-courses-syste
		location / {
			proxy_pass http://192.168.2.213:8080;
		}
		#图片上传
		location /static/utf8-php/php/ {
			proxy_pass http://192.168.2.213:6004/;
		}
		#图片查看
		location /ueditor/ {
			proxy_pass http://192.168.2.213:6004/ueditor/;
		}
	}

8、重启nginx 完成

十、安装Element UI

npm 安装

npm i element-ui -S

导入 在main.js 中

// 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 App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'
import Api from './api'
import moment from 'moment'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import '../static/utf8-php/ueditor.config'
import '../static/utf8-php/ueditor.all.min'
import '../static/utf8-php/lang/zh-cn/zh-cn'
import '../static/utf8-php/ueditor.parse.min'

Vue.use(iView)
Vue.use(ElementUI)

Vue.config.productionTip = false

Vue.prototype.$ajax = Api;
Vue.prototype.$moment = moment;

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: { App }
})

使用

<template>
    <div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="id" width="180">
                </el-table-column>
                <el-table-column prop="kcName" label="课程" width="180">
                </el-table-column>
                <el-table-column prop="xuefen" label="学分">
                </el-table-column>
                <el-table-column prop="leibie" label="类别">
                </el-table-column>
                <el-table-column prop="teacher" label="任教老师">
                </el-table-column>
                <el-table-column prop="xianxuan" label="限选">
                </el-table-column>
                <el-table-column prop="yixuan" label="已选">
                </el-table-column>
                <el-table-column prop="kexuan" label="可选">
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{ "id": 1, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 2, "kcName": "语文课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "260", "yixuan": "200", "kexuan": "60" }, { "id": 3, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 4, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 5, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 6, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 7, "kcName": "测试课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 8, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 9, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 10, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 11, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 12, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 13, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 14, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 15, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 16, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 17, "kcName": "数学课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 18, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }],//接口获取数据
        };
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>

<style scoped>

</style>

展开阅读全文
打赏
1
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
1
分享
返回顶部
顶部