Vue运行时全解析 - VueCLI3上手（一）

molyzzx 发布于2019-08-23 12:04 / 2591人阅读

摘要：可以译作运行时过程全面分析和解析，这个全面分析涉及到比较基础的或者复杂的重要前端概念和中的概念等。注本篇是运行时全解析系列文章的第一篇，首次发表于，友善转载蟹蟹。附更多内容请参考核心维护者蒋豪群同学的的公开课视频

Vue Runtime Full Analysis - VueCLI3 Get Start

VRFA: (Vue Runtime Full Analysis) 可以译作vue 运行时过程全面分析和解析，这个全面分析涉及到比较基础的或者复杂的重要前端概念和vue中的概念等。

注：本篇是《Vue运行时全解析》系列文章的第一篇，首次发表于https://segmentfault.com，友善转载蟹蟹。

阅读本节你能学到什么

官方主推VueCLI3的原因

CLI3的核心概念

CLI3的安装

CLI3简单创建一个项目

Vue ui的使用介绍

使用CLI3按照旧版方式创建项目的方法

安装插件vuex,router方法

修改项目配置的方式

使用VueCLI3的serve命令打开一个vue文件

VueCLI3 上手

根据官方核心开发者的说法，vue 升级到 3，他的脚手架应该也是这个。

为什么要用 3 呢，官方核心维护者给了几个原因：

Cannot upgrade via deps

vue cli 2 创建的项目，我们能升级的只有 vue, webpack 和 webapck 插件本身，而 webpack 和项目的配置文件（即 config 和 build 目录中的文件）无法通过依赖升级来改掉，而 webpack 和 vue-loader 一直在更新，其配置文件也需要随之升级，就成为一个问题

Useless scripts checked into projects

一些无用的脚本文件和资源文件，对写模板的人有用，但对使用的人来说都是无用的，所以需要去删除

No ecosystem sharing

没有一个生态系统的分享，没有插件系统，没有通用的 preset, 如果要调整需要从 templates-vuejs/ewebpack 项目 fork 自己的仓库进行更改并进行调整，但是这个与上游的同步就成为问题

Vue CLI的灵感来源

poi

Zero config Rapid Prototyping 零配置快速原型开发
With just a single JavaScript file you can instantly preview it in your browser. 你可以立即使用浏览器预览一个js文件的执行效果

Interactive Project Scaffolding 交互式项目脚手架
Scaffold out a complete project with desired features in minutes. 分分钟你就可以通过脚手架生成一个自选功能的项目

Framework Agnostic 不偏爱特定框架
Build with your favorite framework or vanilla JavaScript. 随你编译喜欢的框架或者js插件

Fully Extensible 全扩展
A rich collection of official plugins integrating the best tools in the web ecosystem.
A powerful plugin API for making your own plugins. web环境中有官方丰富的扩展作为最好的工具，并且有一个强大的插件接口，提供给你写自己的插件。

neutrino

mozila:webpack-chain链式修改配置，更加优雅

核心概念 Core Concepts

Scaffolding, not only templating // 脚手架，不仅仅是模板

Zero Configuration // 借鉴 parcel

Plugin-based // preset

安装和使用 Insatallation & Usage

yarn global add @vue/cli

# yarn 被推荐，大部分vue的开发的项目都使用yarn
# 快，缓存
vue create my-project
vue ui

注意

这里如果是 windows 环境，如果遇到问题尝试安装 yarn 包管理工具后选择包管理工具时选择 yarn。

yarn VS npm 的文章 http://web.jobbole.com/88459/

有问题可以 https://github.com/vuejs/vue-... 或者 https://forum.vuejs.org/latest

默认 preset 里面只带有 babel 和 eslint 插件

使用旧版

# 使用cli-init工具
npm install -g @vue/cli-init
vue init webpack my-project

引入 vuex, vue-router

# VueCLI3脚手架中默认是没有安装vuex和vue-router
vue add router
vue add vuex

定制化项目配置

// 项目根目录下新建 vue.config.js  
module.exports = {
    lintOnSave: false // 保存时检查格式，使用eslint
    crossorigin: "anonymous" // htmlWebpackPlugin
    css: { // 对组件中css的配置
      modules: true
    },
    devServer: { // 对开发服务的设置
      // Various Dev Server settings
      host: "0.0.0.0", process.env.HOST
      port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
      open: true, // 自动调用默认浏览器打开
      https: false // 是否使用https, https使用node的一个内部默认的ca证书
    }
}

// 查看内置默认的项目配置需要使用 vue inspect命令

启动一个 vue 文件

vue serve template.vue

结束

本节主要介绍了下VueCLI3诞生的原因与初衷，以及想要达到的效果，并简单说明了使用VueCLI3脚手架工具生成一个项目。

附：更多内容请参考VueCLI核心维护者蒋豪群同学的VueCLI的公开课视频

GPU云服务器云服务器运行原理解析上手 java线程运行一次 python怎么上手

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

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

Vue运行时全解析 - Vue的引入（二）

摘要：因为仅仅包含运行时编译比完整版少的代码体积，如果你需要使用完整包也是可以的，你需要调整配置。显式的改变运行时引用包模块在引入时做了什么看完了这几个文件的用途之后我们再来看看引入的时候做了什么带着这个疑问我们继续探索。 Vue Runtime Full Analysis - Import Vue Module 回顾系列文章之《VueCLI3上手》上一节《Vue运行时全解析 - Vue...

jiekechoo 2019-08-23 12:03 评论0 收藏0
vuecli3 vant rem 移动端框架方案

摘要：描述基于适配方案封装，构建手机端模板脚手架帮你做好的配置有多环境开发封装适配方案生产环境优化首屏加速低版本浏览器兼容环境发布脚本可以上手直接写代码多环境开发之前写过一个多环境的方案，是基于的多环境配置方案传送门最近新的项目采用了开始了描述基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架帮你做好的配置...

since1986 2019-08-26 13:54 评论0 收藏0
【开源】小程序And公众号商城，外加后台，功能齐全！

摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...

VishKozus 2019-08-23 13:49 评论0 收藏0
【开源】小程序And公众号商城，外加后台，功能齐全！

摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...

linkFly 2019-07-01 11:00 评论0 收藏0
VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0