【vue-1】vue-cli3.0以上的搭建与配置(2.X的版本是不一样的)
为什么要使用 vue-cli
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
(以下命令都是在dos窗口执行,徽标键+R,输入cmd进入。)
1.安装node.js
官网下载:https://nodejs.org/zh-cn/download/
下一步下一步,就OK了。
测试是否安装成功,输入node -v,查看版本号。
2.npm(Node Package Manager)包管理器安装
npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm。
输入命令:npm -v可得到npm的版本号。
输入命令:npm -g install npm,更新npm至最新的版本。
3.npm安装脚手架vue-cli
【
国内使用npm如果不翻墙基本上是没法正常使用的,如果没法翻墙又要用,解决办法只有使用淘宝镜像了
配置是:
npm config set registry https://registry.npm.taobao.org/
切换回来是:
npm config set registry https://registry.npmjs.org/
如果不想直接配置npm,也可以在命令行中配置,在命令的后面添加这一段
--registry=https://registry.npm.taobao.org
如果要查看npm使用哪个源,可以执行命令查看
npm config get registry
另外,有可能转到淘宝源之后项目安装过程中任然会出现node-sass无法安装的情况,这时可以尝试单独设置node-sass
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
】
(官方文档:https://cli.vuejs.org/zh/guide/installation.html)
输入安装命令:npm install -g @vue/cli
# or
yarn global add @vue/cli
查看vue-cli安装是否成功:vue --version #or vue -V(V要大写)
卸载命令:npm uninstall -g vue-cli
乱码,设置打印将默认的GBK改为UTF-8:chcp 65001
(V要大写,如果明明安装明显成功结束,却vue -V出不来或者vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本;那就要检查是不是以管理员的身份打开dos的,如果是以管理员的命令打开,还是没有验证安装成功,运行此命令:set-ExecutionPolicy RemoteSigned 会出现选项,选择Y 或者A都可以)
可以删除C:\Users\byshe\AppData\Roaming\npm\vue.ps1,就不用每次都要用管理员打开了。
4.创建项目执行
(官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create)
创建项目命令:vue create 项目名称
(警告
如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world
启动这个命令。不过,如果你仍想使用 vue create hello-world
,则可以通过在 ~/.bashrc
文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd'
你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。)
选择项目类型
Vue CLI v3.0.0-beta.6
? Please pick a preset: (Use arrow keys)
> xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 这是我运行过之后的默认设置,第一次执行create是没有的
default (babel, eslint)
> Manually select features //我选的是手动安装 因为不喜欢用eslint 如果实在是不幸装了这个 就在自己配置的vue.config.js里面去加一行代码 lintOnSave:false, 表示关闭格式化检查 // 注:按键盘上下键选择默认(default)还是手动(Manually),
//如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动,
选择特性支持
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // PWA 支持
( *) Router // 支持 vue-router
( ) Vuex // 支持 vuex
(* ) CSS Pre-processors // 支持 CSS 预处理器。
( *) Linter / Formatter // 支持代码风格检查和格式化。
( ) Unit Testing // 支持单元测试。
( ) E2E Testing // 支持 E2E 测试。 // 注意:你要集成什么就选就行了(注:空格键是选中与取消,A键是全选)
//打*是我的选的配置
选择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
选择ESLint + Prettier
? 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
//这里逃脱不了感觉, 所以最后还是自己配一个vue.config.js吧 然后这里去关闭eslint
选择语法检查方式,这里我选择保存就检测
Vue CLI v3.0.0-beta.6
? 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 <space> to select, <a> to toggle all, <i> to invert selection)
>(* ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
选择单元测试
Vue CLI v3.0.0-beta.6
? 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: (Use arrow keys)
> Mocha + Chai
Jest
她会问你 ,把babel,postcss,eslint这些配置文件放哪,这里随便选,我选择放在独立文件夹
Vue CLI v3.0.0-beta.6
? 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里
//这两个我都放过 我觉得无所谓吧 看个人习惯
键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的我保存的名字为xs-default
Vue CLI v3.0.0-beta.6
? 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) // 是否记录一下以便下次继续使用这套配置
确定后,等待下载依赖模块
5.启动项目
初始完之后,进入到项目根目录: cd my-project。
启动项目:npm run serve 或者是yarn serve。
在浏览器输入http://localhost:8080就可以看到vue的欢迎界面。
6.打包上线
vue-cli 也提供了打包的命令,在项目根目录下执行: npm run build。
执行完之后,可以看到在项目根目录下多出了一个 dist 目录,该目录下就是打包好的所有静态资源,直接部署到静态资源服务器就好了。
菜鸟程序媛,若有需修正之处,望指正~
WeChat/QQ:2463105280
【vue-1】vue-cli3.0以上的搭建与配置(2.X的版本是不一样的)的更多相关文章
- 【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具
前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
- vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
- 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)
当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- vue cli3.0打包
1.vue cli3.0需要在项目根目录下配置webpack 包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...
- 从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)
前言 话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器.我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那 ...
随机推荐
- 自动化运维工具之Puppet变量、正则表达式、流程控制、类和模板
前文我们了解了puppet的file.exec.cron.notify这四种核心资源类型的使用以及资源见定义通知/订阅关系,回顾请参考https://www.cnblogs.com/qiuhom-18 ...
- JZOJ2020年8月10日提高组T3 玩诈欺的小杉
JZOJ2020年8月10日提高组T3 玩诈欺的小杉 题目 Description 是这样的,在小杉的面前有一个N行M列的棋盘,棋盘上有\(N*M\)个有黑白棋的棋子(一面为黑,一面为白),一开始都是 ...
- 学习abp vnext框架到精简到我的Vop框架
学习目标 框架特点 基于.NET 5平台开发 模块化系统 极少依赖 极易扩展 ....... 框架目的 学习.NET 5平台 学习abp vnext 上图大部分功能已经实现,多数是参考(copy)ab ...
- 这篇建议java开发都看看,对Java方法及加深理解的很深,值得一看!
方法和加深 方法的定义 修饰符 返回类型 break:跳出switch,结束循环 和 return 的区别 方法名:注意规范 见名知意 参数列表(参数类型,参数名)- 异常抛出 // Demo01 类 ...
- moviepy音视频开发:audio_normalize调整剪辑音量大小到正常
☞ ░ 前往老猿Python博文目录 ░ 概述 audio_normalize函数用于将一个剪辑的音量大小调整到正常,调整的思路就是将剪辑中音频帧数据的最大值取出来,当其值小于1时,表示剪辑的音量偏小 ...
- 使用PyQt(Python+Qt)+moviepy开发的视频截取、音视频分离、MP4转GIF动图工具免费下载分享
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 在因博文素材需要将软件操作制作成动画时,发现网上相关绿色使用工具都需要 ...
- PyQt(Python+Qt)学习随笔:QDockWidget停靠部件的setTitleBarWidget方法
setTitleBarWidget方法用于给停靠窗口设置个性化的标题栏,调用语法如下: setTitleBarWidget(QWidget widget) 说明: widget参数可以是任意一个QWi ...
- Linux(宝塔)部署.Net Core完整记录
前言 最近在V站上看到一个外卖推广的小程序,意思大概是类似淘宝联盟那种,别人走自己的链接后,自己可以抽取大概4%-6%的提成.觉得还蛮有意思的,一开始开源的是静态页面写死的,所以我这边用.Net Co ...
- es6交换两个值
let a='a',b='b' let [a,b]=[b,a];//借助数组解构 let {a:b,b:a}={a,b}//利用别名进行对象解构
- C#软件性能优化
C#软件性能优化 1. 性能 衡量一个软件系统性能的常见指标有:响应时间.负载.资源使用率.并发数.在软件中有具体的提高性能需求时,我们需分析该系统性能的影响由哪些因素组成,再针对各部分进行性能 ...