vue-cli3学习第一节之构建一个vue-cli3项目空壳

vue-cli3已经出来很久了，查了下官方的github，最早的是3.0.0-alpha.1 (2018-01-25)，我写这篇文章的时间是2019.05.27，经过时间的沉淀，一些坑也都填的差不多了，而且我所接触的前端开发有用vue-cli基本上也都上3.x版本了，乘着项目刚做完，我也学习下3.x版本的。这是一套笔记，用于记录我在学习中的坑以及不明白的地方，也是给我一些还没入手vue-cli3.x的朋友的一个简单的教程吧。此学习教程只教如何快速上手，具体原理还需看文档或者查资料。本人使用的npm安装，yarn的请自己查命令。

首先，用vue-cli3.x搭建个壳子，按官网上的走即可。

先卸载旧版的vue-cli2.x，运行下面命令：

npm uninstall vue-cli -g

然后安装新版的vue-cli3.x，运行下面命令：

npm install -g @vue/cli

安装好后运行下面命令看下是否3.x版本：

vue -V

好了，安装好vue-cli3.x了，然后开始搭建空壳项目，运行下面命令：

vue create vue3-demo

出现以下选择：

选择手动配置后出现以下画面，空格为选中，回车为配置完成：vuex看你项目情况，如果是状态多的大项目的话就用，不是的话就不用。

下面是将配置统一放到package.json文件中和分成多个文件单独保存的配置结果（其实个人建议还是统一放到package.json中，毕竟vue-cli3就是为了简化那么多文件配置才做的）：

统一放到package.json图：

分成多个单独文件保存图（多了.browserslistrc,.eslintrc.js,postcss.config.js三个文件，其实就是把package.json中的配置拆分成好几个文件，写道这里感觉统一放也比较不错，以后考虑换成统一放吧)：

配置完了，开始下载安装，完成下载安装后，运行下面命令：

cd vue3-demo

npm run serve

完成了，打开 http://localhost:8080/#/ 即可

感觉写的还是麻烦了些，等写完所有的，就再整理一波精简以下吧。

vue-cli3学习第一节之构建一个vue-cli3项目空壳相关推荐

【Yocto学习入门】02 - 构建一个简单的Poky参考嵌入式操作系统
[Yocto学习入门]02 - 构建一个简单的Poky参考嵌入式操作系统一.开发环境准备二.下载 Poky 代码三.配置编译环境 3.1 下载失败情况处理 Failed to fetch URL ...
ng深度学习第一节代码总结：深层神经网络识别猫咪图片
之前在网易云课堂上看完了ng深度学习第一节课四周的内容,但是没有代码实践,总觉得学的很虚,于是去了coursera...... 这堂课的编程作业是从2层神经网络开始,过渡到n层的,我这里做了下整理,放 ...
[vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
[vue] 从0到1自己构架一个vue项目,说说有哪些步骤.哪些重要插件.目录结构你会怎么组织 1 项目类型前端的项目目前来看主要分为小程序开发,H5页面开发.PC官网.后台管理系统开发.Nativ ...
Vue.js实战之系统学习第一节
为什么叫系统学习呢?因为我以前接触过Vue.js,但是没学过它的原理,只是简单的使用了,使用的时候就觉得很好用,没有其他的什么感觉,但当我进入职场后,学习了很多的前端技术后,才发现这个技术的友好,被它 ...
Pytorch的神经网络编程学习第一节
官网:https://pytorch.org/ Pytorch最早是在2016年10月份发布的,在发布Pytorch之前还有一个叫做Torch的框架.Torch是一种机器学习框架,是基于lua编程语言 ...
通过CLI工具构建一个Vue.js程序
使用CLI工具之前需要用户对Node.js和相关构建工具有一定程序的了解. CLI是构建一个快速而规范的Vue.js项目的重要工具.为了让读者能够快速地学会使用CLI工具,下面直接使用CLI进行项目的 ...
不借助vue-cli，自行构建一个vue项目
前言: 对于刚刚接触vue的同学来说,直接用官方的构建工具vue-cli来生成一个项目结构会存在一些疑惑,比如: .vue组件为什么可以写成三段式(tempalte.script.style)? ...
PyTorch学习系列教程：构建一个深度学习模型需要哪几步？
导读继续PyTorch学习系列.前篇介绍了PyTorch中最为基础也最为核心的数据结构--Tensor,有了这些基本概念即可开始深度学习实践了.本篇围绕这一话题,本着提纲挈领删繁就简的原则,从宏观上 ...
LabWindows_CVI测试技术及工程应用_学习笔记1（构建一个简单的程序）
构建一个简单的程序 1.创建工程文件或File--〉New--〉Project(*.prj),默认名Untitled.prj,存储在Unititled.cws的工作空间中 File--〉Save U ...

vue-cli3学习第一节之构建一个vue-cli3项目空壳

vue-cli3学习第一节之构建一个vue-cli3项目空壳相关推荐

最新文章

热门文章