热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vuex编译项目_vuecli3.0脚手架搭建项目的过程详细解说

1.安装vue-cli3.0npminstall-gvuecli#oryarnglobaladdvuecli安装成功后查看版本:vue-V(大写的V)2.命令变化vu

1.安装vue-cli 3.0

npm install -g @vue/cli

# or

yarn global add @vue/cli

安装成功后查看版本:vue -V(大写的V)

2.命令变化

vue create --help

用法:create [options]

创建一个由 `vue-cli-service` 提供支持的新项目

选项:

-p, --preset        忽略提示符并使用已保存的或远程的预设选项

-d, --default                   忽略提示符并使用默认预设选项

-i, --inlinePreset        忽略提示符并使用内联的 JSON 字符串预设选项

-m, --packageManager   在安装依赖时使用指定的 npm 客户端

-r, --registry             在安装依赖时使用指定的 npm registry (仅用于 npm 客户端)

-g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息

-n, --no-git                    跳过 git 初始化

-f, --force                     覆写目标目录可能存在的配置

-c, --clone                     使用 git clone 获取远程预设选项

-x, --proxy                     使用指定的代理创建项目

-b, --bare                      创建项目时省略默认组件中的新手指导信息

-h, --help                      输出使用帮助信息

3.创建项目

去到指定目录下创建项目(project-name:项目名称)

vue create project-name

my-default 是 我原来保存好的模板;

default 是 使用默认配置

Manually select features 是 自定义配置

4.选择配置(自定义配置)

5.选择css预编译,这里我选择less

Please pick a preset: Manually select features

Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

SCSS/SASS

> LESS

Stylus

6.语法检测工具,这里我选择ESLint + Standard config

Please pick a preset: Manually select features

Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

Pick a linter / formatter config: (Use arrow keys)

ESLint with error prevention only

ESLint + Airbnb config

> ESLint + Standard config

ESLint + Prettier

7.选择语法检查方式,这里我选择保存就检测

Please pick a preset: Manually select features

Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

Pick a linter / formatter config: Prettier

Pick additional lint features: (Press to select, to toggle all, to invert selection)

>( ) Lint on save // 保存就检测

( ) Lint and fix on commit // fix和commit时候检查

8.接下来会问你把babel,postcss,eslint这些配置文件放哪,这里随便选,我选择放在独立文件夹

Please pick a preset: Manually select features

Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

Pick a linter / formatter config: Prettier

Pick additional lint features: Lint on save

Pick a unit testing solution: Jest

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

> In dedicated config files // 独立文件放置

In package.json // 放package.json里

9.键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的我保存的名字为my-default

Please pick a preset: Manually select features

Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus

Pick a linter / formatter config: Prettier

Pick additional lint features: Lint on save

Pick a unit testing solution: Jest

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) // 是否记录一下以便下次继续使用这套配置。

10.确定后,等待下载依赖模块

11.项目创建好后

cd project-name // 进入项目根目录

run serve // 运行项目

12.浏览器打开  http://localhost:8080

总结

上面讲到的是小编给大伙介绍的vue-cli3.0 脚手架搭建项目的过程详解,希望对各位网友能有帮助,有任何疑问或建议请关注我们公众号(shtmlnet)给我们留言,。。在这十分感谢大家对学猫在线(shtml.net)网站的支持!

本文来源:http://www.cnblogs.com/qq1272850043/p/9812421.html



推荐阅读
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 深入解析 Vue 的 Transition 组件与第三方动画库的结合使用
    本文详细介绍了 Vue 中的 Transition 组件,探讨其内置类名机制、触发时机及自定义类名的应用。同时,结合 animate.css 和 GSAP 等第三方库,展示了如何实现复杂的动画效果。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • 解决PHP与MySQL连接时出现500错误的方法
    本文详细探讨了当使用PHP连接MySQL数据库时遇到500内部服务器错误的多种解决方案,提供了详尽的操作步骤和专业建议。无论是初学者还是有经验的开发者,都能从中受益。 ... [详细]
  • 本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题,特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法,帮助开发者顺利打包并优化应用性能。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • Webpack中实现环境与代码的有效分离
    本文探讨了如何在Webpack中有效地区分开发与生产环境,并实现代码的合理分离,以提高项目的可维护性和加载性能。 ... [详细]
  • 在Ubuntu 16.04 LTS上配置Qt Creator开发环境
    本文详细介绍了如何在Ubuntu 16.04 LTS系统中安装和配置Qt Creator,涵盖了从下载到安装的全过程,并提供了常见问题的解决方案。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
author-avatar
江雅君7299
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有