vue-cli3搭建项目的详细步骤

中文文档

https://github.com/vuejs/vue-docs-zh-cn

在安装之前请装好nodeJs

安装vue cli3

1. 检测vue 的版本

vue -V (V大写)
or
vue --version

2. 安装@vue/cli

npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli )

安装全局桥插件,能兼容使用vue cli2

npm install -g @vue/cli-init

cmd命令行创建项目

1. 快速创建一个新项目

vue create name

2. 选择配置

(1). 选择配置,第一次创建项目,只有后面两个,分别是默认和手动自定义选择。第一个是我创建过后保存的,这里选择最后一个,手动选择配置

(2). A全选,空格键选择与取消,上下 移动

(3). 选择css预处理器,这里是选择less

(4). eslint校验方式,这里选择最后一个

(5). 什么时候进行校验,这里选择每次保存的时候进行校验

(6). 把babel,postcss,eslint这些配置文件放哪。放在各自的配置文件里 or 放在package.json,这里选择放在各自的配置文件里

(7). 把刚刚选择的配置文件保存起 or 不保存,保存之后就会出现在每次创建项目选择配置时,这里选择yes,然后取个配置的名字

(8). 按回车就开始下载@vue/cli框架,并初始化项目了

(9). 启动项目

npm run serve

切换项目目录,运行,项目就启动了

GUI界面创建项目

可以在官方自带的图形界面上创建项目,运行项目

1.启动GUI界面

vue ui

2.点击创建新项目,输入项目名字,包管理器选择npm

3.选择项目配置就可以下载@vue/cli,创建新项目了,这里选择之前保存的

4.任务=>serve 点击运行就可以相当于启动项目了 npm run serve 了, 可以点击输出查看控制台结果

配置vue.config.js

@vue/cli3搭建的新项目,没有vue-cli2 的build和config文件夹

所以有什么配置可以在根目录新建一个vue.config.js写上配置项

这里是修改接口和关闭eslint检查

module.exports = {
 lintOnSave: false,
 devServer: {
  port: 8081
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2018-12-05

Vue CLI2升级至Vue CLI3的方法步骤

以下备忘升级至 Vue CLI 3.x 版本后,将项目目录改为新结构时所需做的一些改动. 1. 卸载与安装 npm uninstall vue-cli -g npm install -g @vue/cli 注:若要使用 Vue CLI 3,需将 Node 版本升级至 8.9 及以上. 当使用 nvm 管理 node 版本时,可以使用如下方式切换至需求的 Node 版本: # 安装 >= 8.9 的某个版本 nvm install 8.12.0 # 在当前 session 中使用该版本 nvm u

vue-cli3全面配置详解

本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决

最近遇到一个问题,用 Vue 开发的项目在最近两年新出的安卓手机上没问题,在三四年前的旧手机上出现白屏问题.分析一下应该是安卓系统版本的原因,目前已知的是Android 6.0 以上都 OK,6.0 以下就不行了. 低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性,所以报错.但在手机上调试不方便,受一篇文章的启发, IE 浏览器也是同样的问题,所以可以在 IE 上调试,一个调好了两个就都好了.突然发现万恶的 IE 还是有点用的- 网上的文章大部分是 Vue-cli 2.x

浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化 网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考 安装: npm install webpack-bundle-analyzer --save-dev vue.config.js配置 module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyze

浅析webpack-bundle-analyzer在vue-cli3中的使用

正常的使用方法 安装 npm install webpack-bundle-analyzer -D webpack.config.js: vue-cli3的配置方法 根目录的vue.config.js(没有则自己创建) module.exports = { chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyze

一份超级详细的Vue-cli3.0使用教程【推荐】

主要内容: 零配置启动/打包一个 .vue 文件 详细的搭建过程 重点推荐:使用图形化界面创建/管理/运行项目 安装: 卸载旧版本: 如果你事先已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g Node版本要求: 3.x需要在 Node.js 8.9或更高版本(推荐8.11.0+),点击这里可以安装node 大多数人都安装过了node,使用下面的命令行 查询你的node版本 : node -v 如果你的版本不够,可

Vue CLI3.0中使用jQuery和Bootstrap的方法

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

vue cli3.0 引入eslint 结合vscode使用

它的目标是提供一个插件化的javascript代码检测工具.官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况.所以引入 eslint 做代码检测 第一步 (安装) npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 pac

vue cli3.0结合echarts3.0与地图的使用方法示例

前言 echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作. 下面讲一下做出这样一个echarts图.话不多说了,来一起看看详细的介绍

Vue CLI3 开启gzip压缩文件的方式

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)

在上篇文章给大家介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一) 1. 引入路由工具vue-router,切换视图 # 安装vue-router cnpm install vue-router --save-dev 2. 使用vue-router main.js import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routeConfig f

使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)

1. 根据官方指引,构建项目框架 # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目my-project $ vue init webpack my-project # 进入项目目录 $ cd my-project # 安装依赖,走你 $ cnpm install # 运行项目 $ cnpm run dev 2. 运行项目之后,会看到以下界面

vue 实现cli3.0中使用proxy进行代理转发

解决方法: 在vue项目的根目录下添加 vue.config.js文件,文件中需要按照下面写法来写 module.exports = { lintOnSave: true, devServer: { proxy: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://localhost:8080', //代理接口 changeOrigin: true, pathRewrite

vue 2.0项目中如何引入element-ui详解

前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

Vue CLI3 如何支持less的方法示例

本文介绍了Vue CLI3 如何支持less的方法示例,分享给大家,具体如下: 安装方式: npm install less less-loader --save 或者 cnpm install less less-loader --save 大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-s