iView基础学习（1）-Vue-Cli3.0创建项目

梦里梦外; 2021-09-16 23:50 396阅读 0赞

## Vue-Cli3.0创建项目 ##

### 一、基础知识 ###

（1）使用Vue UI创建、管理项目

（2）项目结构目录整理

（3）初始文件添加

（4）基本配置讲解

（5）跨域配置

--------------------

### 二、使用Vue UI创建、管理项目 ###

1、首先安装vue-cli3.0

2、终端运行vue ui

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

Vue UI界面介绍

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 1][]

Projects：表示vue项目

Create：表示创建vue项目

Import：表示导入vue项目

3、创建项目

**详情**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 2][]

**预设**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 3][]

**功能**

通常，我们一般选择一下功能：Babel,Router,Vuex,CSS Pre-processors,Linter/Formatter,使用配置文件等等

**配置**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 4][]

**是否保存预设**

保存之后，可以用于下次创建项目 。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 5][]

创建完成后，我们可以查看项目中的**插件、依赖、配置、任务**等。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 6][]

--------------------

### 三、项目结构目录整理 ###

项目目录如下图：

![20181113071930911.png][]

解释：

***vue.config.js***：配置文件。

***package.js***：定义项目的描述，项目版本、名称、运行的脚本、依赖等等。

***babelconfig.js***：babel的配置文件。

.***gitignore***：Git提交时的忽略文件。

***.eslintrc.js***：配置eslint规则的文件。

***public***：公共文件。public/index.html：模板文件。public/favicon：图标文件。

***src***：开发文件。src/assets：静态文件、src/components：抽离的组件、src/iview：视图文件（页面）。

***app.vue***：基础组件。

***main.js***：入口文件。

***router.js***：路由文件。

***store.js***：vuex状态管理文件。

--------------------

### 四、初始文件添加 ###

对于使用vscode的开发者，可以添加编辑器配置文件（.editorconfig），并进行基本配置。

root = true
    [*]
    charset = utf-8
    indent_style = tabs
    indent_size = 2

**注意**：配置完成之后，需要安装EditorConfig for VS Code。

--------------------

### 五、新增文件夹/文件 ###

***api***：该文件夹用于存放api接口请求。

***assets/img、assets/font***：分别对应放置图片、图标字体。

***config***：项目的配置文件夹。

***config/index.js***：对项目的一些配置。介绍：使用eslint语法，使用 ***export default \{ \}*** 导出配置对象，在使用的时候直接引入即可。举例：***config/index.js ***在 ***store.js ***文件中使用，代码如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    import config from './config/index'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state: {
    
        },
        mutations: {
    
        },
        actions: {
    
        }
    })

***directive/index.js***：存储 **自定义指令 **的文件。

***lib/util.js***：**与业务有关系 **的方法。

***lib/tools.js***：与 **业务没有直接关系 **的方法，即 **纯粹的方法**。

--------------------

***router/router.js***：原有的router.js移入router文件夹，以后放置 **路由列表** 。

***router/index.js***：将原有的router.js文件中的除路由列表以外的部分。

iView中router文件夹下有index.js和router.js两个文件。其中，index.js文件用于创建路由实例。router.js文件用于配置路由。

index.js文件

import Vue from 'vue'
    import Router from 'vue-router'
    // 引入router.js文件
    import routes from './router'
    
    Vue.use(Router);
    
    export default new Router({
        routes
    })

router.js文件

import Home from '@/views/Home.vue'
    
    export default [{
            path: '/',
            name: 'home',
            component: Home
        }, {
            path: '/about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () =>
                import ( /* webpackChunkName: "about" */ '@/views/About.vue')
        }, {
            path: '/argu:name',
            component: () =>
                import ('@/views/argu.vue')
        }
    
    ]

***store/index.js***：将原有的store.js文件移入store文件夹中，并重命名为index.js。注意：需要将拆分后的 ***state.js***、***mutations.js***、***actions.js ***文件引入，并注册。如下：

***store/state.js***：vuex中的 state 。

***store/mutations.js***：vuex中的 mutations 。

***store/actions.js***：vuex中的 actions 。

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import actions from './actions'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state,
        mutations,
        actions
    })

新增模块的使用方法：

***store/module/user.js***：存储用户信息的模块（以user.js为例）

const state = {
    
    }
    
    const mutations = {
    
    }
    
    const actions = {
    
    }
    export default {
        state,
        mutations,
        actions
    
    }

使用很简单，只需要在store/index.js中引入即可。如下：

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import actions from './actions'
    // 引入module模板(user为例)
    import user from './module/user'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state,
        mutations,
        actions,
        modules: {
            user
        }
    })

***mock/index.js***：用于数据模拟。在后端接口为提供之前，前端开发者，可以用该文件（终端：***npm instal mockjs -D*** 安装）进行数据模拟。

import Mock from 'mockjs';
    
    // 在这里封装接口请求......
    
    
    export default Mock

此时，我们新增的文件已经完成了。

--------------------

### 六、基础文件 ***vue.config.js ***配置 ###

具体的名词解释，请留意代码注释。代码如下：

###  六、温馨提示 ###

**更多博文，请关注公众号：****xssy5431** **小拾岁月**

**扫码：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/ae6cedde996c45c4acf145bd03e78b56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 1]: /images/20210802/0306cb05af60477ebfacb4fe4450080b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 2]: /images/20210802/a9fe56aca7fc459b86b382a5d6f997b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 3]: /images/20210802/a1a47cdab6d3426ea9d7bc7edd2e3945.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 4]: /images/20210802/375ddd98a33347ef9ed72eacf118de4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 5]: /images/20210802/dcf070856dd94096a0cd4696577d00ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 6]: /images/20210802/c1ae62a27c50455b927a0ec1bf672155.png
[20181113071930911.png]: /images/20210802/46995f5c60564a8c9b1b4b80a82539bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 7]: /images/20210802/c9ce4ca35be44b368ba687a4da7f79ca.png