vue-cli3创建及配置

2018-11-09 admin

全局安装

先安装vue-cli3,即 @vue/cli

npm install -g @vue/cli

查看是否安装成功 命令vue -V 如果版本为3.x,恭喜你,迈出第一步了!

创建项目

这里以项目名为 vue-admin 为例

vue create vue-admin

看到下图所示,这里会列出你以往保存的配置,键盘上下键选择配置,我们选择最后一个,自行配置。 clipboard.png

然后会进入下图所示步骤,按你自己需求选择一些配置,鼠标上下键选择,按空格标记选中状态。选好回车。 clipboard.png

继续,看到下图,我选择sass

clipboard.png

继续,这里询问你,把babel,postcss,eslint这些配置文件放哪 1.独立文件放置 2.放package.json里

我选择独立放置 clipboard.png

接下来y,回车就行了,然后就生成了项目。 这里和vue2的运行方式不一样,由原来的npm run dev改成了npm run serve

clipboard.png

运行后:

clipboard.png

配置

和cli2版本相比,减少了很多文件(去掉了cli2的build和config等目录)。

clipboard.png

那么我们的一些配置,要放到哪里呢?? 应在根目录下创建配置文件vue.config.js,举例如下配置,配置了项目使用的端口号,并在项目启动后直接在浏览器打开。

clipboard.png

原文链接:https://segmentfault.com/a/1190000016950507

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44913.html

文章标题:vue-cli3创建及配置

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
纯JS实现旋转图片3D展示效果
CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, ...
2017-03-20
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
回到顶部