精华内容
下载资源
问答
  • vue cli 4 +创建项目步骤

    千次阅读 2020-07-23 16:32:32
    1.创建项目开始,定义名称 vue create [appName] 例如创建一个名称为 testapp 的项目命令为 vue create testapp 2 选择配置类型 按方向键选择,按enter确认 第一个为默认配置,包含eslint 和 babel 第二个为...

    一、安装脚手架

    安装命令如下

    npm install -g @vue/cli
    yarn global add @vue/cli
    

    检测版本

    vue --version
    

    检测vue/cli版本

    二、创建项目

    1.创建项目开始,定义名称
    vue create [appName]
    

    例如创建一个名称为 testapp 的项目命令为

    vue create testapp
    

    创建项目开始

    2 选择配置类型

    按方向键选择,按enter确认
    第一个为默认配置,包含eslint 和 babel
    第二个为自定义配置
    配置选择

    3 各项配置设置
    操作方式

    按方向键进行上下选择
    按空格 选中
    按A键全选
    按I键全选
    按enter 确认所有配置进入下一步

    (1)babel

    是否引入转码功能,该项功能可将es6转码成es5

    (2) TypeScript

    是否引入ts,引入后可使用ts进行编程

    (3)Progressive Web App (PWA) Support

    是否引入渐进式Web应用程序(PWA)支持 (pwa为应用多项技术的web app。核心技术包括 App Mainfest、Service Worker、Web Push,等等)

    (4)Router

    是否引入vue-router

    (5)vuex

    是否引入状态管理

    (6)css-processors

    是否引入css预处理

    (7) linter / formatter

    是否引入格式验证

    (8) Unit Testing

    是否引入单元测试

    (9)e2e Testing

    是否引入 end to end 测试
    在这里插入图片描述
    上述选完后点击enter 可看到所有选中的设置项
    在这里插入图片描述

    4 针对上述选中项进行单独配置
    (1) 开启vue router

    选择路由模式 是否启用history模式(默认是hash模式)
    history 模式

    (2)开启 css pre-process

    选择css 预处理方式 箭头选择 enter确认
    依次为 dart-sass dart编写的sass
    node-sass node编写的sass
    less
    stylus 在这里插入图片描述

    (3) 开启linter/formatter

    ESLint with error prevention only 只有报错功能
    ESLint + Airbnb config 简化模式
    ESLint + Standard config 标准模式
    ESLint + Prettier 严格模式

    (4)选择校验时机

    lint on save 保存即检验
    lint and fix on commit 提交时进行检验及修改
    在这里插入图片描述

    (5)选择单元测试方案

    Mocha + Chai
    Jest

    (6)选择e2e测试方案

    Cypress (Chrome only) 只能在chorme中使用
    Nightwatch (WebDriver-based)

    5 保存配置位置

    In dedicated config files 额外文件中
    package.json package.json中
    在这里插入图片描述

    6 是否将当前配置保存为一个默认配置

    在这里插入图片描述

    展开全文
  • Vue cli4快速创建项目

    千次阅读 2020-05-29 23:04:18
    项目中使用的是Vue cli3脚手架,最新的已经更新到了cli4.xx,于是直接官网上从最新的学习,这里总结一下在idea中使用Vue cli4快速创建项目过程。 1.新建项目目录,使用idea打开 本地新建一个项目目录vueStudy,...

    最近公司一期项目接近尾声,没有那么忙了,前端框架使用到了Vue,于是抽空花了几天时间来学习它,记录一些点滴。项目中使用的是Vue cli3脚手架,最新的已经更新到了cli4.xx,于是直接官网上从最新的学习,这里总结一下在idea中使用Vue cli4快速创建项目的过程。

    1.新建项目目录,使用idea打开

    本地新建一个项目目录vueStudy,使用idea打开:

     

    2.安装node.js,npm依赖,cli脚手架,查看版本

    环境准备:

    这里安装好node.js环境后,就可以安装cli了:

    准备好环境后,在idea中查看安装的版本,如下:

    3.创建项目

    创建项目命令:vue create 【项目名称】

    出现如下选择,第一项默认配置,这里我选择第二项,手动配置:

    我选择的项目自定义配置如下(空格选中当前项,再次空格取消选择):

    选择是否使用路由 history router,其实就是是否路径带 # 号(这里我只是简单描述,并不贴切),我选择n:

    css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。dart-sass需要保存后才会生效,sass 官方目前主力推 dart-sass :

    选择 ESLint 代码校验规则,我选择ESLint + Prettier :

    代码校验,我选择第一项,保存就检查,相当于热部署:

    存放配置,由于只是学习的简单项目,我就选择了package.json:

    是否保存本次的配置,这里我选择了否:

    最后回车,等待项目创建完成:

    如果创建成功,会有如下描述:

    查看项目目录机构,如下(这里就不多描述了):

    4.启动项目

    根据项目创建完成的提示,可以看到如下命令:

    先进入项目目录(cd vue1):

    在输入启动项目命令(npm run serve):

    启动成功后,点击下面任一链接即可打开页面:

    启动项目后的界面如下(一个基于cli4快速创建的项目就完成了):

    展开全文
  • 一、vue cli的介绍和安装 Vue cli 是一个基于 Vue.js 进行快速开发的完整系统。 有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue...CLI 插件:给Vue 项目提供可选功能的

    一、vue cli的介绍和安装

    • Vue cli 是一个基于 Vue.js 进行快速开发的完整系统。 有三个组件:

      CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui
      等命令)

      CLI 服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server
      之上(提供 如:serve、build 和 inspect 命令)

      CLI 插件:给Vue 项目提供可选功能的 npm 包 (如: Babel/TypeScript 转译、ESLint 集成、unit和
      e2e测试 等)

    • vue cli的安装可参考开发文档https://cli.vuejs.org/zh/guide/installation.html

    • node.js的安装可参考中文官方网站http://nodejs.cn/download/

      特别提醒:安装时,要注意自己安装的node.js的版本,一般不需要安装最新版本,官方文档要求是node.js版本≥8.9,我们安装的时候可以安装尽量大一点的,比如10.8.0左右都是可以的

    二、vue cli创建项目

    (1)打开cmd命令终端
    (2)一般打开都是默认路径为C盘:C:\Users\Administrator
    如果我们想要将项目创建在其他路径文件下,可以修改路径:

    • 输入cd\,可直接跳到C盘一级根目录下;
    • 输入d:,可切换到D盘一级目录下;
    • 输入cd\vscode\vuepj,可进入对应的路径文件下
    • 输入cd…,可退出当前文件夹;

    在这里插入图片描述
    (3)创建项目:输入命令vue create 项目名称
    在这里插入图片描述
    (4)选择Manually select features,自定义配置选项
    在这里插入图片描述
    (5)使用键盘上下键移动选择需要的配置选项,按下空格选择或取消,一般项目选择的是Babel、Router、Vuex、CSS Pre-processors(可根据对应的项目来选择)
    在这里插入图片描述
    (6)选择需要使用的vue.js版本,一般选择vue 2.x,选择可以参考文章选择Vue.js版本
    在这里插入图片描述
    (7)use history mode for router,根据项目需要选择yes或者no,选择Sass时,一般选择dart sass
    在这里插入图片描述
    (8)一般选择In dedicated config files
    在这里插入图片描述
    (9)选择是否保存配置在某个文件里,以后项目可以使用,根据个人需要选择yes或者no,选择yes就定义一个文件名,将配置保存在该文件里,将来的项目可以直接使用
    在这里插入图片描述
    (10)等待加载(第一次创建可能等待时间有点久)
    在这里插入图片描述
    出现如下图即创建完成,可输入命令:npm run serve运行项目
    在这里插入图片描述
    (11)打开浏览器,输入对应网址,运行项目成功
    在这里插入图片描述

    展开全文
  • 史上最详细cli创建vue项目步骤,创建vue项目,vue使用cli创建项目,创建vue3项目

    完整过程(创建的是vue3的项目):

    在这里插入图片描述

    具体步骤

    1、第一步:打开命令行窗口。Windows控制台的打开方式
    在这里插入图片描述
    注意:所在目录将会是创建项目的目录

    2、第二步:执行创建项目命令行。
    在这里插入图片描述
    3、第三步:选择自定义创建。
    在这里插入图片描述
    4、第四步:选中vue-router,vuex,css Pre-processors(css预处理器)选项,需要用什么就选中什么。
    在这里插入图片描述
    5、第五步:选择vue3.0版本。
    在这里插入图片描述
    6、第六步:选择hash模式的路由。
    在这里插入图片描述
    7、第七步:选择less作为预处理器。
    在这里插入图片描述
    8、第八步:选择 standard 标准代码风格。
    在这里插入图片描述
    9、第九步:保存代码校验代码风格,代码提交时候校验代码风格。
    在这里插入图片描述
    10、第十步:依赖插件或者工具的配置文件分文件保存。
    在这里插入图片描述
    11、第十一步:是否记录以上操作,选择否。
    在这里插入图片描述
    12、第十二步:安装依赖包的时候是用npm还是yarn。
    在这里插入图片描述
    13、第十三步:等待安装…
    在这里插入图片描述
    最后安装完毕
    在这里插入图片描述

    展开全文
  • 使用Vue CLI创建项目的步骤! 本篇文章我们将会从认识vue-cli , 安装vue-cli, 使用vue-cli创建项目三个方向学会使用VUE CLI 来创建一个vue项目 认识VUE CLI 简单的理解vue cli 就是一个快速构建项目的工具。存在于...
  • 二、创建项目 1、随意找一个盘打开Powershell,我就在桌面创建输入 vue create demo-h5 2、选择配置项 3、选择Manually select features(手动选择功能) 4、选择Vue2,回车 5、选择路由模式,回车;选择node-sass...
  • 第四种和第三种的创建方式稍微不同,如下 ,可以发现第四种方式和 vue-cli2的 结构目录最为相似 对比vuetest3和vue3test4 看一下两者的package.json文件,就都明白了 五. 安装了Router、CSS Pre-processors 说明:...
  • 步骤讲解Vue-cli创建项目vue-cli安装创建一个vue的项目 vue-cli安装 全局安装vue-cli npm istall -g @vue-cli 创建一个vue的项目 比如我想在E盘地下的一个文件下创建一个vue的项目 输入cmd,回车,在终端输入 vue ...
  • vue CLI 官网链接: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
  • 文章目录一、安装最新vue-cli二、创建项目三、运行项目四、总结 提示:以下是本篇文章正文内容,仅供参考 一、安装最新vue-cli 官方网址:https://cli.vuejs.org/ 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @...
  • vue cli 项目创建过程.mp4
  • 4Vue-cli项目创建

    2021-02-05 00:13:07
    Vue-cli项目的创建最近在开发网站,项目运用到了Vue-cli这个脚手架工具,下面记录一下vue-cli创建项目的一些步骤,为自己的学习做相关笔记。vue.png一、首先我们需要安装node.js 这是我们的核心安装步骤:一路next...
  • Vue 使用Vue-CLI4 创建Vue项目

    万次阅读 2019-11-07 10:23:31
    创建项目 vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以有三个。 取消eslint(Linter) 下一步默认 是否保存...
  • 最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,... 创建一个项目vue create iview-admin# ORvue uidefault (babel, eslint) 默认套餐,提供 babel 和 eslint 支持。Manually select...
  • 在电脑搜索框中数如cmd打开命令提示符 然后可以在里面输入node -v注意是node空格-v 如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:下载 | Node.js 中文网 ...vue-cli安装 ...
  • Vue-cli3创建项目步骤

    2021-01-02 16:59:04
    准备工作:vue-cli的版本需要3以上(我的是V 4.5.9),node环境 在项目文件夹下,打开命令行创建 第一步: //test为你想要创建一个项目vue create test 会出现下面的选择 选择手动选择功能 Manually select ...
  • VueCLI2以及CLI3创建项目过程 1.全局安装webpack npm install webpack -g 2.安装Vue脚手架(默认是脚手架3) npm install -g @vue/cli (3.x.x) 3.若要使用脚手架2,则需要拉取Cli2 npm install @vue/cli-init -g 4....
  • Vue-cli项目创建

    千次阅读 2018-09-12 13:42:49
    最近在开发网站,项目运用到了Vue-cli这个脚手架工具,下面记录一下vue-cli创建项目的一些步骤,为自己的学习做相关笔记。 安装 安装node.js这是我们的核心 1.下载 node.js 安装步骤:一路next安装好了...
  • VUE CLI2创建项目

    2021-01-13 20:54:41
    写在前面:vue cli3创建项目请参考另一篇文章:vuecli3创建项目 前提: 必须先安装node和npm node通过官网下载安装,这里就不赘述了,安装node会自动安装npm 可在命令指示框中通过指令查看是否安装成功 出现版本号...
  • Vue-cli创建项目步骤

    2021-10-05 13:49:13
    使用 vue-cli 搭建项目 下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。 如何全局化安装cnpm,这里简单提一下: npm install cnpm -g --registry=...
  • vue-cli3快速创建项目

    万次阅读 多人点赞 2019-06-16 23:37:52
    vue-cli3快速创建项目 最近准备用vue-cli3写项目啦,之前也都是看看文档,直接引入官方的js,写写简单的demo,没有写过项目,从今天开始写学习VUE. 1.安装 文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至...
  • 利用vue-cli创建项目步骤简述

    千次阅读 2018-06-21 21:36:31
    利用vue-cli搭建项目步骤准备步骤包括1、安装node.js,运行 node -v 检查版本,运行 npm -v 检查版本;2、安装webpack,运行 npm install webpack -g 运行 webpack -v 检查版本第一步:全局安装vue-cli做法:在终端...
  • vue cli 3.0快速创建项目

    万次阅读 多人点赞 2018-05-25 15:19:40
    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npm npm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set registry ...
  • vue】使用vue-cli4.0快速搭建一个项目

    万次阅读 多人点赞 2019-10-25 10:38:43
    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁...
  • 上接vue-cli4创建前端项目(路由、vuex与axios应用),本篇解决了一些编码过程中遇到的问题。 1.设置全局模板 全局模板的作用是为了让所有的页面都按照某种布局来进行展示,比如两边固定是广告或者操作表盘等,只有...
  • Vue-cil是Vue的脚手架工具,可以帮助我们编写基础的代码,可以帮我们搞定目录结构、本地调试、...Vue-cli是一个node包,首先要先装node.js,对版本也有些要求(node.js具体流程安装看这里) 2、安装Vue-cli 3 装...
  • 前提环境要准备好,Node,和vue,以及webpack,(也可以使用vite 来创建) 第一步 cd 到自己存放...如果是cli2 创建命令使用 vue init webpack 项目名称 这里让我们选vue的版本 上下键选择 我们这里进行手动配置 Ch.
  • 使用vue-cli3创建项目

    2021-01-17 19:57:12
    使用vue-cli3创建项目过程,项目的目录结构
  • 使用@vue/cli4创建element项目(一)

    千次阅读 2020-06-17 16:50:27
    本文主要内容是通过@vue/cli4创建一个基础的element项目,记录一下完整的创建过程 1.安装node.js 访问地址:Node官网,下载最新的LTS(长期支持版本),进行安装,安装过程使用默认安装方式就可以,但是注意一点,安装过程...
  • 最近在用vue cl3.0或vue cli4.0创建项目的时候碰到一个很坑爹的问题,就是git里上下箭头没有作用,查了一堆资料试了各种方法才弄好,在这里我把我找到的几种比较靠谱的方法推荐给大家,希望能给大家带来一些帮助。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,019
精华内容 6,007
关键字:

vuecli4创建项目的过程

vue 订阅