(一):*安装 vue-cli

参考:

https://cn.vuejs.org/v2/guide/installation.html

https://github.com/vuejs/vue-cli

全局安装:

npm install vue-cli -g 或者 npm install -g @vue/cli-init

cd到某文件夹下初始化:

cd ./vue_app

vue init webpack project_one(目录名称)

初始化配置一些信息:

通常: y/n y
eslint y/n n
jest y/n n
e2e y/n n

项目构建完成

开发环境中运行在本地 8080:

cd project_one

npm dev

localhost:8080 浏览器访问

(二):*上线前的打包(打包成静态文件,html,css,js)

npm run build

根目录下创建了dist文件夹,包含index.html和static文件夹

终端提示:

(Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.)

意思是:构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

解决方式:

方法一:修改 ./config/index.js文件,
将build.assetsPublicPath: '/'修改成build.assetsPublicPath: './'

方法二:将dist文件部署到服务器环境即可运行

关于vue-cli的安装的更多相关文章

  1. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  2. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  3. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  4. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

  5. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  6. vue cli创建typescript项目

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

  7. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  8. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  9. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

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

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

随机推荐

  1. 安装MySQL详细说明

    安装MySQL详细说明 下载后得到zip压缩包 解压到自己的安装目录 添加环境变量 我的电脑->属性->高级->环境变量 选择PATH,在其后面添加:你的mysql安装文件下面的bi ...

  2. 线程礼让_yield

    线程礼让_yield 礼让线程,让当前正在执行的线程暂停,但不阻塞 将线程从运行状态转为就绪状态 让cpu重新调度,礼让不一定成功!看CPU心情 测试案例: package multithreadin ...

  3. MySQL学习02(操作数据库)

    操作数据库 结构化查询语句分类 名称 解释 命令 DDL(数据库定义语言) 定义和管理数据对象,例如数据库和数据表 create.drop.alter DML(数据操作语言) 用于操作数据库对象中所包 ...

  4. PLSQL编程及存储过程的创建

    一.PLSQL的初步介绍 PLSQL是使sql具有处理过程的能力,可以分为三个部分:声明部分.可执行部分.异常处理部分 1.如何使用PLSQL打印Hello World! 在sqlplus里中打印   ...

  5. 谈谈Linux字符设备驱动的实现

    @ 目录 字符设备驱动基础 申请设备号 创建设备节点 在驱动中实现操作方法 文件IO调用驱动中的操作 应用程序与驱动的数据交互 内核驱动如何控制外设 控制LED的简单驱动实例 驱动程序的改进 框架复盘 ...

  6. Are You OK?主键、聚集索引、辅助索引

    每张表都一定存在主键吗? 关于这个问题,各位小伙伴们不妨先自己想一想,再往下寻找答案. 首先公布结论:对于 InnoDB 存储引擎来说,每张表都一定有个主键(Primary Key)! 让人非常遗憾的 ...

  7. JVM 基础面试题总结

    hey guys, 各位小伙伴们大家好,这里是程序员cxuan,欢迎你收看我新一期的文章,这篇文章我花了几天时间给你汇总了一波 JVM 的基础知识和面试题,内容还不是很全,我还在连载中,这篇文章相当于 ...

  8. js中使用function定义类、实例化,函数的调用方法

    function Test002(name, age){ name, age, this.printInfo = function(){ //定义的公有方法 console.log(name, age ...

  9. 高德渲染网关Go语言重构实践

    ​1.导读 高德启动Go业务建设已经有段时间了,主要包含Go应用落地,Go中间件建设,云原生三个部分.经过持续的发力,在这些方面取得了不错的进展.高德Go业务落地过程是如何实现的,遇到过哪些问题,如何 ...

  10. reids rdb与aof

    rdb:时合高并发场景,容易备份恢复,会丢失部分数据 1.默认开启的方式,可以进过压缩,可以根据时间点生成快照 2.数据量大的情况下恢复快 3.bgsave一边开启fork保存文件,一边继续响应客户端 ...