vue cli 是一个基于 vue.js 进行快速开发的完整系统,提供:
- 通过
@vue/cli
搭建交互式的项目脚手架。- 通过
@vue/cli
+@vue/cli-service-global
快速开始零配置原型开发。- 一个运行时依赖 (
@vue/cli-service
),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一套完全图形化的创建和管理 vue.js 项目的用户界面。
vue cli 致力于将 vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject
vue-cli3官网帮我们概述了vue-cli3的一些特点。个人在使用vue-cli3的感受中 零配置、可升级 2个特点确实很不错。
如何安装vue-cli3呢?
首先,你要有一个nodejs环境
node 版本要求
vue cli 需要 node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 或 在同一台电脑中管理多个 node 版本。
其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作
关于旧版本
vue cli 的包名称由
vue-cli
改成了@vue/cli
。 如果你已经全局安装了旧版本的vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。
假设你已有了nodejs环境,你可以通过下面指令安装vue-cli3的包
npm install -g @vue/cli # or yarn global add @vue/cli
安装之后,你就可以在命令行中访问 vue
命令。你可以通过简单运行 vue
,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。(例如 vue --version)
接下来就是创建一个vue的项目了,使用下面命令:
vue create hello-world
你会被提示选取一个 preset。你可以选默认的包含了基本的 babel + eslint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
在多选时,空格代表选中,enter代表进入下一个配置项
且你手动选择的配置项还会存入到你电脑的 ~/.vuerc 文件中,这样子你下次创建vue项目的时候,可以选择你之前手动配置的配置,这点vue cli3做得很人性化哦!点赞!
上面的配置选择完之后,一个简单的vue项目就创建成功了。这个时候你在命令行cd hello-world,进入到hello-world项目根路径下,命令行敲下npm run serve,项目就开始跑起来啦。
再讲一下创建项目后的 目录层次吧,接图:
一个一个来:
// vue.config.js module.exports = { // 选项... baseurl:"./", outputdir:"dist", assetsdir:"assets", indexpath:"", filenamehashing:true, pages:undefined, lintonsave:true, runtimecompiler:false, transpiledependencies:[], productionsourcemap:false, crossorigin:undefined, integrity:false, devserver:{//代理 port:8086, proxy:'http://192.168.255.201:8082' } }
博主目前是这样的配置做开发,没问题哦~感觉vue-cli3真的很棒哦,真香警告~~~哈哈哈。
希望可以帮助更多前端小伙伴~ 金木·晨 2018年08月28日10:50:09
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论