资讯专栏INFORMATION COLUMN

vue-cli 3.0 安装使用

seanHai / 2784人阅读

摘要:基础命令安装检查是否安装成功新建项目项目启动打包功能配置运行以下命令来创建一个新项目你可以选默认的包含了基本的设置的,也可以选手动选择特性来选取需要的特性这里我们选择手动选择功能自定义功能配置按下空格选择或取消路由是否使用模式如果

基础命令
# 安装
npm install -g @vue/cli

# 检查是否安装成功
vue -V

# 新建项目
vue create my-project

# 项目启动
npm run serve

# 打包
npm run build
功能配置

运行以下命令来创建一个新项目:

vue create my-project

你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性(这里我们选择手动选择功能)

Vue CLI v3.9.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

自定义功能配置 (按下空格选择或取消)

Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

路由是否使用history模式(如果使用history模式,需要后台去配合)

Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

选择CSS 预处理类型 (按自己习惯即可)

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择Linter / Formatter规范类型 (按自己习惯即可)

Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

选择检测的方式(保存的时候检测/提交的时候检测)

Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 (多带带配置成文件/package.json中)

Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

是否保存刚刚这些配置 (按自己习惯即可)

Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

然后自动下载依赖,下载完成会提示

�  Successfully created project vue-study.
�  Get started with the following commands:

 $ cd my-project
 $ npm run serve

执行npm run serve命令,即可看到效果

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

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

相关文章

  • vue-cli2.0转3.0之项目搭建

    摘要:因为项目技术架构需要,要用进行搭建,所以简单的分享下如何优雅的开始。第三步创建项目相对,创建就不是之前一大堆了。直接,是项目名字。但是个人建议,进行多选,根据自己需要进行选择。根据提示,运行一把一下,跑起来的感觉很棒。 因为项目技术架构需要,要用vue-cli 3.0进行搭建,所以简单的分享下3.0如何优雅的开始。下面做一下简单的介绍,希望可以帮到有需要的朋友。 vue-cli 3.0...

    Zhuxy 评论0 收藏0
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    摘要:在年月份发布了版本,经过重构之后,可以说是一个船心版本在项目都落地之后,就想升级一下版本,尝一尝带来的舒适,也是为后面项目的开展做一个准备。选了之后会询问是否开启模式,以及选择预处理器,这里根据个人情况选用。 vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本!在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个...

    avwu 评论0 收藏0
  • vue-cli 3.0

    摘要:配置环境变量参考打包后项目的启动发生了变化,之前可以直接打开,现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题 首先这次使用的vue脚手架为vue-cli 3.0,它跟之前的脚手架改变了很多,这里我也没去细细的研究,也只懂得了最基本的用法,参考: vue-cli 3 地址:http...

    April 评论0 收藏0
  • vue-cli 3.0

    摘要:配置环境变量参考打包后项目的启动发生了变化,之前可以直接打开,现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题 首先这次使用的vue脚手架为vue-cli 3.0,它跟之前的脚手架改变了很多,这里我也没去细细的研究,也只懂得了最基本的用法,参考: vue-cli 3 地址:http...

    mengera88 评论0 收藏0
  • vue-cli3.0安装与配置

    摘要:安装与配置最近公司要开新项目,用配置,让我搞一搞,做个记录。最好自己去官网过一遍的文档安装完成后检测一下是否安装成功,如下图展示。显示以上就安装成功。第一个默认配置只会安装和,其它的需要自己配置,不建议选,这里我们选择第二个手动配置。 vue-cli3.0安装与配置 最近公司要开新项目,用vue-cli3.0配置,让我搞一搞,做个记录。 安装 首先你要升级到cli3.0,命令如下。(最...

    zilu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<