前端——Vue CLI 3.x搭建Vue项目
一、Node安装
windows
1. Node.js (>=8.9, 推荐8.11.0+)
Node官网下载 .msi 文件,按步骤下载安装即可。
安装完之后在cmd中输入 node -v
,若显示版本号,则说明安装成功。
2. Git(命令行终端)
Git官网下载安装即可。
Linux
apt-get install nodejs
node -v
apt-get install npm
npm -v
npm命令
1、得到原本的镜像地址
npm get registry
2、设置成淘宝
npm config set registry http://registry.npm.taobao.org/
3、换成原来的
npm config set registry https://registry.npmjs.org/
二、vue-cli安装、更新
如果全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步。
npm uninstall vue-cli -g
操作如下:
可以看到我之前的版本是2.9.6,卸载成功后,vue命令便不存在了。
ps:如果有npm WARN警告,可能是coffee-script的某个依赖包改名了(coffee-script本身已经淘汰了)。
下面开始全局安装 @vue/cli(Vue CLI 3的包名称由vue-cli改成了@vue/cli):
npm install -g @vue/cli
更新:
npm update @vue/cli
查看安装成功否(有版本号就是成功,V大写)
vue -V
三、vue-cli搭建vue项目
执行如下命令即可(注意该命令跟vue-cli2.x不同)。
vue create <Project Name> // 文件名 不支持驼峰(含大写字母)
但如果是在windows环境下直接使用 Git Bash,交互提示符并不工作,必须通过如下命令来创建项目:
winpty vue.cmd create my-project
具体操作如下:
- 首先,会提示你选择一个preset(预设):
- 如果之前配置保存过,那么有preset-config选项,可以直接用。
- 如果没有配置保存过,则只有两个选项:
- default(babel,eslint):默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的npm包。
- Manually select features:手动配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的npm包。
我们选择手动配置,根据你需要用方向键选择(按“空格键”选择/取消选择,A键全选/取消全选)对应功能。
为了方便稍后跟用vue-cli2.x创建的项目结构作对比,我们这边仅添加Router而不添加Vuex。
简单介绍一下各个参数含义:
? Check the features needed for your project:
>( ) Babel // 转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为JavaScript在浏览器运行,目前较少人在用
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
选择完后直接enter,然后会提示你选择对应功能的具体工具包,选择自己擅长或者使用广泛的(方便遇到问题时百度),简介如下:
① 是否使用history router:

Vue-Router利用了浏览器自身的hash模式和history模式的特性来实现前端路由(通过调用浏览器提供的接口)。
详情见Vue Router - HTML5 History 模式。
② css预处理器

? 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 // Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)
LESS // Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
Stylus // Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。
③ ESLint
提供一个插件化的javascript代码检测工具。
bash? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + 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时候检查
⑤ 单元测试
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai // mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest // 安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
⑥ 如何存放配置
bash? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
In package.json // 放package.json里
⑦ 是否保存本次配置(之后可以直接使用)
? Save this as a preset for future projects? (Y/n) // y:记录本次配置,然后需要你起个名; n:不记录本次配置
搭建完成后,依次执行 cd my-project
和 npm run serve
即可访问vue默认的demo页面。
参考博客:https://www.wenyuanblog.com/blogs/vue-cli3x-to-create-vue-project.html
前端——Vue CLI 3.x搭建Vue项目的更多相关文章
- vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
- ubuntu下安装vue/cli提示No command 'vue' found
通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...
- 让我们用Vue cli全家桶搭建项目
一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...
- Django+Vue.js框架快速搭建web项目
一.vue环境搭建1.下载安装node.js.2.安装淘宝镜像cnpm,在命令窗口输入: npm install -g cnpm --registry=https://registry.npm.tao ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue + cesium开发(5) 搭建 vue + cesium开发环境(2)
上vue+cesium开发(1)中,没有进行配置webpack,而是使用了插件进行代替,在使用过程中出现了一些未知BUG,影响体验,因此参考了官方文档对项目进行重新配置,使用了 copy-webpac ...
- vue第一篇(搭建vue开发环境)
1.下载node并安装 下载地址: https://nodejs.org/zh-cn/ 下载后双击文件安装 2.检查是否安装成功 node -v v10.16.0 npm -v 6.9.0 如果能正常 ...
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
随机推荐
- tf.nn.relu6 激活函数
tf.nn.relu6(features,name=None) 计算校正线性6:min(max(features, 0), 6) 参数: features:一个Tensor,类型为float,doub ...
- 【Java】Array 数组
概述 数组是多个相同数据类型按一定顺序排列的一组数据 特点: - 数据类型相同!! - 长度固定!! 构成数组的几个要素 - 数组名称 - 下标,又称索引 - 元素 - 数组长度 数组是一种引用类型, ...
- 小白们错过就没了!Python基础之注释&变量命名
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:DZQTesters PS:如有需要Python学习资料的小伙伴可以加 ...
- Gun N' Rose Team Review
一看到这个项目就被他的功能给吸引了.回忆起以前看到一个东西很新奇想去网上查询它是什么,但是又不知道应该怎样去描述它,于是在搜索引擎的输入框中键入.删除.键入.删除的可笑经历的时候,我就越发感觉到这个a ...
- Java核心技术--接口与内部类
接口implement 继承接口,即履行"义务". 接口中所有的方法自动属于public,在接口声明中,不必提供关键字public 接口中决不能含有实例域,也不能在接口中实现方法 ...
- 文本文件的合并操作方法 - Python
我们有时候,看到几k的日志文件,一大堆,一个一个打开又很麻烦,少看几个,又担心遗漏,这个时候,如果有一个可以合并所有文本文件的工具就好了. 下面这个代码就可以实现,它不局限于.txt格式,基本上字符型 ...
- Java 14 来势汹汹,这回让空指针无处遁形!!
上篇:Java 14 之模式匹配,非常赞的一个新特性! 相信在坐的每一位 Java 程序员都遇到过空指针异常: NullPointerException(NPE),不甚其烦. 栈长之前也分享几篇避免空 ...
- IN612 IN612L蓝牙5.0 SoC芯片替换NRF52832/NRF52840
IN612L是美国公司INPLAY的SOC产品系列之一,具有多模协同2.4G无线协议栈,支持2.4G私有协议栈以及蓝牙5.0全协议栈的SOC芯片.如2mbps高数据速率模式,125kbps/500kb ...
- windows下部署.netcore+docker系列三 (unbuntu 18.4 下安装ftp)
// 先更新下系统sudo apt-get update//安装ftpsudo apt-get install vsftpd// 启动 服务sudo service vsftpd start//ftp ...
- share sdk
新浪微博 http://open.weibo.com 腾讯微博 http://dev.t.qq.com QQ空间 ...