使用Vue-cli 3.0搭建Vue项目的方法

2024-08-27 09:37:40

1. 环境准备

1.1. 安装Node.js （建议使用LTS版本）

1.2. nrm安装及npm registry设置

// use npm
npm i nrm -g
// use yarn
yarn global add nrm

查看可用的npm源

nrm ls

nrm查看npm源.png

切换npm源(以使用taobao为例)

// 用法： nrm use ***
nrm use taobao
// 切换之后可用 nrm ls查看是否已经切换了npm源

nrm切换npm源.png

1.3. 安装yarn

npm i yarn -g

1.4. 安装vue-cli 3.0

npm i @vue/cli -g

2. vue-cli搭建脚本文件

以搭建一个项目名称为vue-test的Vue前端项目为例

在终端输入以下命令

vue create vue-test

根据提示进行相应的配置（以手动配置为例）：

2.1. 选择Manually select features

vue-cli-0.png

2.2. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）

vue-cli-1.png

2.3. 选择CSS预处理器语言，此处选择LESS

vue-cli-2.png

2.4. 选择ESLint的代码规范，此处使用 Standard代码规范

vue-cli-3.png

2.5. 选择何时进行代码检测，此处选择在保存时进行检测

vue-cli-4.png

2.6. 选择单元测试解决方案，此处选择 Jest

vue-cli-5.png

2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

vue-cli-6.png

2.8. 配置完成后等待Vue-cli完成初始化

vue-cli-7.png

2.9. vue-cli初始化完成后，根据提示，进入到vue-test项目中，并启动项目

// 进入到vue-test项目
cd vue-test
// - 启动服务
yarn serve
// - 打包编译
yarn build
// - 执行lint
yarn lint
// - 执行单元测试
yarn test:unit

3. vue.config.js配置 [TODO]

3.1 vue.config.js介绍

3.2. 配置代理

3.3. 配置Webpack其他选项

4. 升级已有项目到vue-cli 3.0版本 [TODO]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

在 vue-cli v3.0 中使用 SCSS/SASS的方法

在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器),否则无法在项目中直接使用. 方案一:在组件中直接使用在组件中直接使用 SCSS/SASS 是最简单的方式: <style lang="scss" scoped> </style> 通过 lang 选
vue cli3.0结合echarts3.0与地图的使用方法示例

前言 echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作. 下面讲一下做出这样一个echarts图.话不多说了,来一起看看详细的介绍
详解如何配置vue-cli3.0的vue.config.js

本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue
vue-cli3.0使用及部分配置详解

好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个在选择功能后,会询问更细节的配置, TypeScript: 是否使
Vue-cli@3.0 插件系统简析

Vue-cli@3.0 是一个全新的 Vue 项目脚手架.不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置.接下来我们就通过 Vue-cli@3.0 的源码来看下这套插件架构是如何设计的. 整个插件系统当中包含2个重要的组成部分: @vue/cli,提供 cli 命令服务,例如vue create创建一个新的项目: @vue/cli-
10分钟上手vue-cli 3.0 入门介绍

环境安装全新版本的脚手架.逼格非常高. 记住这个名字 @vue/cli ,对就是这个你npm 或者yarn 安装就行了,先保证全局环境有它. npm install -g @vue/cli yarn add global @vue/cli 创建项目这里对比下以前2.X之前的版本 ,新版本把插件以及模板等移植到命令行界面了. 旧版创建命令 2.x vue init <template-name> <project-name> 3.x vue create <proje
快速了解vue-cli 3.0 新特性

vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能. vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了,但是不可能在本文中列举所有的内容,这篇文章作为一个对比 2.0 升级功能的导读,让你快速了解 3.0 更新的内容. 一.创建项目: 创建项目命令的变化. vue create my-project 3.0 版本包括默认预设配置和用户自定义配置. 自定义功能配置包括以下功能: TypeScript P
vue-cli项目中使用echarts图表实例

我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D3 它
浅谈vue-cli 3.0.x 初体验

最近项目正在优化.乘着有时间看了一下 vue-cli3.0.x 使用 .感觉还蛮不错的. 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 "build" 和 "config" ,让人看着就有一些不爽 .由于公司环境比较多,需要测试环境的配置.增加了 ""tt": "node build/tt-build.js"" .到 3.0.x 应该怎么用? 带着这些
vue-cli3.0 特性解读

最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines)

使用Vue-cli 3.0搭建Vue项目的方法

相关推荐

随机推荐