五分钟教你使用vue-cli3创建项目(新手入门)

目录
  • 一、搭建vue环境
  • 二、Vue脚手架工具
  • 三、创建项目
  • 四、选择manually select (enter键确认,并进入下一步)
  • 五、选择完成之后回车 这里我们选择3.x的
  • 六、完成之后回车 出现以下界面
  • 七、回车 出现以下界面
  • 八、回车出现以下界面
  • 九、回车出现以下界面
  • 十、回车出现以下界面
  • 十一、回车出现以下界面
  • 十二、根据提示,启动项目

一、搭建vue环境

安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定。

点我进入node官网

安装好后cmd输入node -v查询是否安装成功,如下出现版本号即为成功。

二、Vue脚手架工具

全局安装vue-cli,命令行中输入:

npm install --g vue-cli

国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝镜像或者yarn

淘宝镜像的安装如下

npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装成功后 使用 cnpm i xxx 代替 npm install xxx

三、创建项目

vue create 项目名
vue create  code    //其中code为你的项目目录名称   (enter键确认,并进入下一步)

最开始回车会出现下面两项

Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)
Manually select features(手动选择项目特性)

我们可以通过上下键,空格来选择我们需要的,一般我们都会选择手动配置

四、选择manually select (enter键确认,并进入下一步)

对于每一项的功能,王同学做一个简单的描述:

  • Babel 主要是对es6语法转换成兼容的js (选上)
  • TypeScript 支持使用TypeScript语法来编写代码
  • Progressive Web App (PWA) Support [把网页做的更像原生app]
  • Router 支持vue路由配置插件(一般都会选择)
  • Vuex 支持vue程序状态管理模式 (一般都会选择)
  • CSS Pre-processors 支持css预处理器 (一般都会选择)
  • Linter / Formatter 支持代码风格检查和格式化 (选上)
  • Unit Testing 单元测试
  • E2E Testing E2E测试

常见的项目选择如下

五、选择完成之后回车 这里我们选择3.x的

六、完成之后回车 出现以下界面

这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我门选择 n

七、回车 出现以下界面

这里的意思是问你选择哪一种CSS预处理语言,我的项目中一般使用的是SCSS我选择第一个

八、回车出现以下界面

这里的意思是选择一种格式化代码方式:我一般选择 ESLint + Prettier

九、回车出现以下界面

这里的意思是问你什么时候进行代码规则检测,我一般会选择保存就检测,也就是Lint on Save

十、回车出现以下界面

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个

十一、回车出现以下界面

这里是问你是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了,完成后如下图:

十二、根据提示,启动项目

根据指令提示 我们先执行cd code,然后执行npm run serve

十三、当我们需要自定义webpack相关配置的时候需要在项目根目录中创建vue.config.js文件,它会被@vue/cli-server自动加载,相关配置内容官网将的很详细,大家可以自己去官网看 好了,今天的内容就到这里了,本期结束 我们下期见!!!

到此这篇关于五分钟教你使用vue-cli3创建项目(新手入门)的文章就介绍到这了,更多相关vue-cli3创建项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-13

使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

vue-cli3.X快速创建项目的方法步骤

1.安装 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它: npm uninstall vue-cli -g # 或 yarn global remove vue-cli vue-cli 3.x安装: npm install -g @vue/cli # OR yarn global add @vue/cli 说明:-g / global 表示全局安装. 安装完成后可通过以下

使用vue-cli3+typescript的项目模板创建工程的教程

版本问题 全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它 (vue -V 查看自己的脚手架版本) npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注:Vue CLI 3需要 nodeJs ≥ 8.9 安装 cnpm install -g @vue/cli 创建项目(以下只说明用vue ui图形化界面导入配置好的demo) vue ui 打开脚手架的图形化界面,进到到demo目录,导入(提示没有依赖,选择仍然导入

使用Vue-cli3.0创建的项目 如何发布npm包

在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置文件 修改publicPath的路径为相对路径 mod

Vue CLI3.0中使用jQuery和Bootstrap的方法

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

vue cli3.0打包上线静态资源找不到路径的解决操作

项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

vue cli3.0 引入eslint 结合vscode使用

它的目标是提供一个插件化的javascript代码检测工具.官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况.所以引入 eslint 做代码检测 第一步 (安装) npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 pac

使用vue2.0创建的项目的步骤方法

1.由于vue项目依赖 node.js npm 需要先安装.   若没有请先安装,请按照此文章进行安装https://www.jb51.net/article/138020.htm //检查是否有node.js  npm vue win+r   输入cmd  输入node -v  回车 会出现node,js的版本 输入npm -v  回车 会出现npm的版本 输入vue -V 回车 会出现vue的版本 2.安装vue: npm install -g vue-cli   //-g表示全局安装,vu

vue cli3.0结合echarts3.0与地图的使用方法示例

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

Vue CLI3 开启gzip压缩文件的方式

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

Vue Cli3 创建项目的方法步骤

最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

基于vue如何发布一个npm包的方法步骤

前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready? Go! 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.json 文件 我们可以根据自己的需要补充文件内容 这是我的: { "name"

Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网

1.准备工作. 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli 2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本,我测试用的是macOS,所以下载了第二个压缩包 ​ 下载到本地后,解压缩,并且将解压缩后的文件夹复制到以下路径下,其中电脑名称就是你的用户名称. /Users/{电脑名称}/Library ,并且重命名为ApacheTomcat,这里要提一下,在这个文件夹下