(一):*安装 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. 史上最详细的Android消息机制源码解析

    本人只是Android菜鸡一个,写技术文章只是为了总结自己最近学习到的知识,从来不敢为人师,如果里面有不正确的地方请大家尽情指出,谢谢! 606页Android最新面试题含答案,有兴趣可以点击获取. ...

  2. VNC远程重装CentOS7

    适用于云服务器,远程安装纯净版的CentOS7.9 脚本执行完成后使用VNC客户端连接 一键重装脚本 #!/bin/bash #Net Reinstall Centos System red='\03 ...

  3. Convert a Private Project on bitbucket.com to a github Public Project

    Create a public repo on github, you can add README or License files on the master branch, suppose th ...

  4. LiteFlow 2.6.0版本发行注记,项目逻辑解耦的利器

    前言 自从LiteFlow 2.5.X版本发布依赖,陆续经历了10个小版本的迭代.社区群也稳固增长,每天都有很多小伙伴在问我问题. 但是我发现最多人问我的还是:什么时候能支持界面编排? 从LiteFL ...

  5. GO Time 类型方法处理集合

    1.判断2个时间是否超时 package main import ( "fmt" "time" ) func main() { //获取1秒后时间 var No ...

  6. ACM学习笔记:可持久化线段树

    title : 可持久化线段树 date : 2021-8-18 tags : 数据结构,ACM 可持久化线段树 可以用来解决线段树存储历史状态的问题. 我们在进行单点修改后,线段树只有logn个(一 ...

  7. S3C2440—10.代码重定位

    文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...

  8. noip模拟12[简单的区间·简单的玄学·简单的填数]

    noip模拟12 solutions 这次考试靠的还是比较好的,但是还是有不好的地方, 为啥嘞??因为我觉得我排列组合好像白学了诶,文化课都忘记了 正难则反!!!!!!!! 害没关系啦,一共拿到了\( ...

  9. webpack编译遇到的问题:Error: Cannot find module 'webpack-cli/bin/config-yargs'

    运行npm run dev遇到的问题:Error: Cannot find module 'webpack-cli/bin/config-yargs' // 当前package.json 文件 ​ & ...

  10. TaskAwaiter<TResult> 结构

    参考网址:https://docs.microsoft.com/zh-cn/dotnet/api/system.runtime.compilerservices.taskawaiter-1?view= ...