1.检测node的版本号

注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+)

所以在安装Vue CLI之前先看下node的版本

node -v

2.安装@vue/cli

npm install -g @vue/cli

安装之后,可以用如下命令验证它是否安装成功(版本为3.x)

vue --version

3.创建项目  eg:项目名称为hcs

vue create hcs

提示选取一个 preset ==> a.选默认的包含了基本的 Babel + ESLint 设置的 preset       b.选“手动选择特性”来选取需要的特性

a1.默认配置====》 选择 默认 将直接开始安装

a2.自定义配置===》 选择自定义,方向键上下移动,空格选中,Enter确定,自定义配置中,您将会看到这些配置项:

a3.自定义预处理(细节处理)

b1.是否使用class风格的组件语发?

b2.是否使用babel与TypeScript一起用于自动检测的填充?

路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面 yes

b3.选择CSS预处理类型

b4.选择语法检测规范

  • tslint: typescript格式验证工具
  • eslint w...: 只进行报错提醒; 【选这个】
  • eslint + A...: 不严谨模式;
  • eslint + S...: 正常模式;
  • eslint + P...: 严格模式;

b5.选择保存时检查/提交时检查

b6.选择配置信息存放位置,单独存放或者并入package.json

注意:vue-cli 一般来讲是将所有的依赖目录放在package.json文件里

b7.是否保存当前预设,下次构建无需再次配置

b8.安装成功,根据提示,

4.目录结构

3.0的目录结构相对2.0精简不少,如图

注意:a1.public相当于原来的static 2.public里的index.html是项目的入口  3.src同2.0的一样  4.3.0中没有build和config

可以在项目的根目录下新建vue.config.js文件

module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > ,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: ,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}

在package.json中自行查看配置的详细信息

在指令中输入

npm run serve  ---》运行指令

npm run lint  ---》语法检测&自行修复

基于@vue/cli 的构建项目(3.0)的更多相关文章

  1. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  2. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  3. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  4. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  5. 转载: 我如何使用 Django + Vue.js 快速构建项目

    原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...

  6. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  7. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  8. 基于Vue 和 webpack的项目实现

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  9. 基于VUE多人聊天项目

    项目背景 公司平台要做一个通讯系统,本来是java 来做的后面改前端+PHP来做,所以就用VUE来做这个了. github github地址 新人求star 技术栈 vue-axios vuex we ...

随机推荐

  1. Xcode查看iOS崩溃与崩溃日志分析

    一.造成崩溃的原因 1.代码中存在bug 2.Watchdog 超时机制 3.用户强制退出 4.低内存终止 5.其他违法系统规则的操作,大部分是内存问题 二.崩溃的类型 1.信号错误类 (1)EXC_ ...

  2. 管理Exchange Online用户介绍(二)

    一.Exchange Online配置邮件传递限制 1..进入“Exchange 管理中心”,依次点击 收件人->邮箱->选择需要管理的用户->编辑->邮箱功能->邮件传 ...

  3. Mysql-win免安装卸载服务后重新安装不能启动的问题

    一.先看配置文件有没有问题,以下是一个简单的配置 [mysql] default-character-set=utf8 [mysqld] character-set-server=utf8 port ...

  4. php的header方法

    http://www.cnblogs.com/fengzheng126/archive/2012/04/21/2461475.html

  5. 专利|Pct||

    专利:有些专利写的尽量模糊,为了不让别人检出,让别人能轻易侵犯专利权 优先权:在本国申请后,在他国也是同一个专利人申请,并也是同一个申请日. 发明20年:实用新型外观设计:20年 Pct:专利合作条约 ...

  6. VB.Net制作-历朝通俗演义

    原先的回数,全是汉语数字,为此我先转换成了阿拉伯数字,遗憾的是阿拉伯数字100居然排在1和2之前!所以必须设置为3位数字才行!否则顺序是乱的. 以下是用VBA批量重命名的代码: Dim FSO As ...

  7. 【Linux_Shell 脚本编程学习笔记一、条件表达式】

    条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] 比较符 整数比较 -eq:比较两个整数是否相等,$A -eq $B -ne:测试两个整数是否不等,不等则为真 ...

  8. fiddler问题汇总

    fiddler教程:https://kb.cnblogs.com/page/130367/ fiddler下载安装:https://www.cnblogs.com/mini-monkey/p/1128 ...

  9. Docker For Mac 下安装 Rancher

    https://www.jianshu.com/p/5fb3e1a998d6 Docker For Mac 下安装 Rancher 原文:如何在 OS X 上安装 Rancher Rancher 是 ...

  10. react动态添加多个输入框

    let obj = {} result.forEach(item =>{ obj[item.eleId] = item }) setFieldsValue(obj)