Vue-Cli3.0创建项目

一、基础知识

(1)使用Vue UI创建、管理项目

(2)项目结构目录整理

(3)初始文件添加

(4)基本配置讲解

(5)跨域配置


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

1、首先安装vue-cli3.0

2、终端运行vue ui

Vue UI界面介绍

Projects:表示vue项目

Create:表示创建vue项目

Import:表示导入vue项目

3、创建项目

详情

预设

功能

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

配置

是否保存预设

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

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


三、项目结构目录整理

项目目录如下图:

解释:

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.jsmutations.jsactions.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 配置

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

const path = require('path');
const resolve = dir => path.join(__dirname, dir);
// 定义基础路径
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin' : '/';
module.exports = {
    // 不保存为eslintt规范的代码
    lintOnSave: false,
    baseUrl: BASE_URL,
    // 以下链式结构作用:指定文件路径的简化缩写。
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('_c', resolve('src/components'))
    },
    // 打包时不生成map文件,加快打包速度,减少体积。

    productionSourceMap: false,
    // 设置跨域转发:将任务未请求到静态文件的请求均代理到http://localhost:4000
    devServer: {
        proxy: 'http://localhost:4000'
    }
}

 六、温馨提示

更多博文,请关注公众号:xssy5431 小拾岁月

扫码:

 

 

Logo

前往低代码交流专区

更多推荐