vue-cli 是vue官方提供的一个脚手架工具,用于初始化一个Vue项目;
vue-cli的优势:
1、成熟的vue项目架构设计,而且会跟随vue版本的更迭而更新;
2、提供了一套本地测试服务器,而且是一个热加载的服务器;
3、提供了自己的一套集成打包上线的方案,webpack 或者gulpify在创建项目的时候可以进行选择;
有了以上优势,可以非常快速的搭建项目;
vue-cli对系统的要求:
vue-cli 是命令行的一个工具,系统需要
1、node.js(>=4.x)
2、能使用node的命令行终端;
第一步,我们安装node.js
进入nodejs官网:https://nodejs.org/en/
下载LTS(长期支持稳定)版本,下载下来后,双击 一步一步安装即可;
测试安装是否OK; node --version
有版本号出来,就说明没毛病;
以及安装Node的时候,Npm包管理工具也是一并安装的;
npm -v
第二步:安装Vue-cli;
vue-cli脚手架最新版本是3,我们先学习稳定版2
全局安装命令:npm install -g vue-cli@2.9.6
执行后,慢慢等待吧,要搞一会呢;
等安装完后,vue -V
说明vue-cli安装没毛病;
第三步:使用vue-cli脚手架来新建vue项目;
命令:vue init webpack vue_demo
vue_demo是项目名称,我们自己取名即可;
核心本质,是去github下载一个模版, https://github.com/vuejs-templates/webpack
通过脚手架可以设置名称,以及定制插件;
一些设置选项:
设置项目名称,项目描述,作者,以及选择构建模式,我们选运行+编译模式;
vue-router要讲到用到,所以选用,
eslint代码验证用到讲到,所以选用,以及选标准模式;
我们不用单元测试,所以no,以及e2e测试 也是no
然后那个再选用NPM下载;
我们等待下载定制的模版吧;
等下载万完成后,
模版项目就OK了;
每个文件的详解,可以参考:
https://segmentfault.com/a/1190000014804826
后面我们也会讲解和熟悉到这些配置;需要有个过程;
第四步:运行项目
我们先打开webstorm 然后open打开刚才的vue_demo项目
打开左下角终端Terminal 输入启动命令:npm run dev
启动OK;我们浏览器输入 http://localhost:8080 启动项目
显示这个的话 就说明完全OK;
第五步:优化配置,轻松写学习开发;
我们稍微优化下配置,让端口搞成默认80,以及启动后自动打开浏览器,顺便熟悉下配置;
打开config下的index.js 把 port改成80 autoOpenBrowser改成true即可。
然后 重启试下;
相关推荐
使用Vuecli3.0创建的前端项目,里面有登陆验权、路由拦截、axios请求拦截、公用方法、vuex、SVG图片、vuex持久化存储等
使用vue脚手架vue-cli配置多页面应用
在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz为后缀: 一般浏览器都已支持.gz的资源文件,在http请求的Request Headers
vue-cli使用配置vue-cli使用配置vue-cli使用配置vue-cli使用配置
NodeJS环境配置、Vue创建启动、VSCode开发使用
vue-cli 图片打包成base64的大小限制配置文件件 vue.config.js
vue-cli3多页面配置demo vue-cli3多页面配置demo vue-cli3多页面配置demo
vue-cli3.0图片打包,小于10k的图片没有自动转base64问题处理
安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 。 npm uninstall vue-cli -g 2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v ...
基于vue-cli的vue多页面配置模板
相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧。 过完年回来后,我接手了公司的新项目。新项目是一个spa。很自然,我就想到了vue-cli脚手架了,当时研究一下它的...
vue-cli@3 + element 搭建的基本框架,包含axios封装http请求,请求拦截,请求设置参数加密,引入加密配置等,兼容ie浏览器
安装与配置 vuecli.docx
记录了Vue-cli2的相关基本操作和配置,包含学习笔记等等,仅供个人学习使用。啦啦啦啦啦啦啦啦啦啦啦啦啦
记录了Vue-cli3的相关基本操作和配置,包含学习笔记等等,仅供个人学习使用。啦啦啦啦啦啦啦啦啦啦啦啦啦
大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text...
使用vue-cli3配置多页面, 第一步:安装依赖npm i; 第二步:运行npm run serve;
vue cli3 多入口 多出口demo 集成了 jQuery axios store element-ui等 相关依赖(请参考 package.json)
本篇文章主要介绍了详解基于vue-cli配置移动端自适应,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
vue-cli配置的vue多页移动端(免单活动项目)