记自己一次vue基础实战：配置篇

SmallBoyO 发布于2019-08-26 10:16 / 2715人阅读

摘要：前言记录自己从基础学习实战，初入发表文章，望各位大佬口下留情不对之处还请大佬指点一下。在加载完后，你自己默认的浏览器自动打开配置界面新建项目。

1. 前言

记录自己从基础学习vue实战，初入发表文章，望各位大佬口下留情！不对之处还请大佬指点一下。

2. 新建，配置项目

1. 新建Vue-cli3.0脚手架的项目

在这里普及一下，什么是Vue-cli？

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。链接描述

上面引用的链接已经很好说明一切了，这里我就不一一详细说明怎么安装node.js和npm了，我就说明一下我自己的基础开发流程：

1.1 使用Vue ui
我使用的是Vscode编辑器，可以在编辑器终端使用快捷键Ctrl + ·，可以快速打开，输入Vue ui。在加载完后，你自己默认的浏览器自动打开配置界面新建项目。以下是我今天的配置：

在详情上新建项目名；选择包管理器，我这里选择是npm，因为当然是用的比较熟悉了；其余的默认操作；下一步；

预设（Presets），默认使用官方提供好的插件和配置，内心感觉不太妙还是谨慎一下手动配置；下一步；

功能（Features），手动添加插件：
一.（Babel）可以把ES6/7语法兼容或者换成ES5更加适合低版浏览器的版本，使开发者无需考虑浏览器的支持问题，随便使用新语法；
二.（Router）路由，必须滴；
三.（Vuex）状态管理，大型项目可以提现它的重要性，小项目也是可以用的，反正不亏；
四.（CSS Pre-processors）css预处理，可以为css添加一些编码的特性；
五.（Linter/Formatter）编写代码风格提示，及时纠正你的小毛病；
六.（Use config files）使用配置文件

配置（Configuration）选择预处理器，看个人平时习惯，这里我选（Eslint+standard config）

上述配置，回到Vscode,终端输入npm run serve,就开始你的奇妙之旅了。

3. 项目配置

回到项目的我们可以看一下依赖包，生成好的项目

上面的文件依次是

依赖包（node-modules），这就不用多说了吧，安装的依赖都在这里面，有兴趣后面会对里面的源码进行更深层次的解读。

公共文件夹（public）里面是vue的图标加首页的html

src目录重头戏(我一般有以下文件)
1.api接口文档，与后端进行数据交互；
2.assets项目资源主要（img）图片、（font）字体等等静态资源存放在这里；
3.components组件及一些复用组件；
4.config主要是根据模块系统导出配置对象；
5.directive自定义指令，可以写自己定义好的函数使用
6.lib与实战开发相关或者与实战不相关工具函数都在放在这里
7.mock模拟数据，在没有与后端正式对接的时候，可以模拟数据，方便到时候与后端开发时修改数据传输格式
8.router路由，跳转路由页面都要在这里注册，后面会讲到把一部分抽离出来，就是权限那一块
9.store状态管理，vuex的state、mutations、actions、getters等等都在这里，后面会详细介绍
10.views视图，页面主要展示和组件组合使用的文件
11.App.vue起始页面，通过路由跳转个个页面
12.main.js全局文件，在这导入的文件可以去全局使用import

.editorconfig 用来协同不同开发人员、编辑器、代码风格、样式规格化定义和维护一致的编码样式

.eslintrc.js 语法检测配置

postcss.config.js 将px转化为rem

vue.config.js 开发总配置：

// 定义一个方法
const path = require("path")
// 主要是方便导入名简写，这里使用es6的箭头函数
const resolve = dir => path.join(__dirname, dir)
// 开发环境配置 "/"指定域名的根目录下，如果是开发环境写‘/xxxx/’即可
const BASE_URL = process.env.NODE_ENV === "procution" ? "/xxxx/" : "/"
module.exports = {
  // 取消每一次保存编译
  lintOnSave: false,
  // 项目基本路径
  baseUrl: BASE_URL,
  // 方便开发的配置
  chainWebpack: config => {
    // webpack目录别名配置
    config.resolve.alias
      // 导入时以@可以代替src，拼接路径
      .set("@", resolve("src"))
      // 上同
      .set("_c", resolve("src/components"))
  },
  // 打包时不生成.map文件，减少打包文件
  productionSourceMap: false,
  // 跨域问题
  devServer: {
    proxy: "http://localhost:4000"
  }
}

4. 结语

拖了好久没写，第一次自己组织语言有点不好，语言不同通顺的地方望多多指点，就当自己练习。
下一节讲解路由基础，看有没有时间写了，希望给萌新点个赞!

专线服务 idc机房托管实战篇基础篇之基础篇 java语言程序设计基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105886.html

记自己一次vue基础实战：配置篇

摘要：前言记录自己从基础学习实战，初入发表文章，望各位大佬口下留情不对之处还请大佬指点一下。在加载完后，你自己默认的浏览器自动打开配置界面新建项目。 1. 前言记录自己从基础学习vue实战，初入发表文章，望各位大佬口下留情！不对之处还请大佬指点一下。 2. 新建，配置项目 1. 新建Vue-cli3.0脚手架的项目在这里普及一下，什么是Vue-cli？ Vue是一套用于构建用户界面的渐...

NoraXie 2019-08-02 15:34 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0
正则系列——JavaScript正则表达式基础语法巩固篇

摘要：基础语法巩固正则表达式引擎根据正则去匹配字符的时候，是通过检查索引的方式。妻原配就是好，可以直接使用正则表达式调用它。下面解释一下上面这些常用的元字符查找单个字符，除了换行和行结束符。正则系列文章整理到了上一章内容：正则表达式实战篇知识回顾前2章分别学习了正则表达式入门技巧，以及遇到正则需求该如何去分析问题，还有正则表达式实战的一些场景解释。这一章内容偏向理论，推荐你点击开头的...

phodal 2019-08-22 11:09 评论0 收藏0