使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli
1、安装vue-cli
//设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//全局安装vue-cli
cnpm install -g vue-cli
安装完成后,使用vue-V查看是否安装成功
2、生成项目
1、进入项目目录,初始化一个项目
//以webpack模板初始化项目
vue init webpack myProject(自定义项目名称)
2、进入项目,安装依赖
cd myProject
cnpm install
3、启动项目
npm run dev
到这一步,浏览器上应该会显示带有vue图标的默认页面
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件
config>index.js
另外,可以将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。
3、打包上线
自己的项目文件都放到 src 文件夹下
打包命令
npm run build
打包完成后,会生成 dist 文件夹
项目上线时,只需要将 dist 文件夹放到服务器就好了
使用vue-cli创建vue项目的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- 用vue ui创建的项目怎么关闭eslint校验
在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 用vue脚手架创建bootstrap-vue项目
用vue脚手架创建bootstrap-vue项目 框架的地址:https://bootstrap-vue.js.org/docs/ 第一步 vue init webpack demo第二步 cd de ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- 用Angule Cli创建Angular项目
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- 使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
随机推荐
- spring学习总结——高级装配学习三(Bean的作用域)
一.bean的作用域 在默认情况下,Spring应用上下文中所有bean都是作为以单例(singleton)的形式创建的.也就是说,不管给定的一个bean被注入到其他bean多少次,每次所注入的都是同 ...
- UDK命令
UDK命令行参数与控制台命令都是大小写不敏感的 命令行 udn中文 udn英文 全词大小写匹配,正则表达式,在c++代码中搜索减号开头的命令行参数(如:-BENCHMARK.-onethread等 ...
- MongoDB 最大连接数 设置失效的异常分析
背景介绍: 查询MongoDB配置参数,可以知道关于最大连接数的参数是maxConns.但是连接实例后,查看支持的最大连接数,还是默认的819. 说明:最大连接数是由maxConn (maxIncom ...
- cesium加载纽约市3dtiles模型
const tileset = new Cesium.Cesium3DTileset({ url: '../../assets/data/NewYork/tileset.json' }); viewe ...
- JavaScript数据类型之null和undeined
null null是JavaScrpt的关键字,表示一个特殊值,常用于描述"空值".对null执行typeof运算将返回字符串"object". undefin ...
- 英语口语练习系列-C08-考试
<蒹葭>-诗经 蒹葭苍苍,白露为霜.所谓伊人,在水一方.溯洄从之,道阻且长.溯游从之,宛在水中央. 蒹葭萋萋,白露未晞.所谓伊人,在水之湄.溯洄从之,道阻且跻.溯游从之,宛在水中坻. 蒹葭 ...
- telnet操作memcache
1.使用方法 1. 连接到memcached telnet 192.168.1.100 11211 add name 0 60 5 [说明 add 是指令名 name 是key的名字 (是以 ...
- android的listview以及画线--to thi tha
https://www.cnblogs.com/896240130Master/p/6135165.html 这个的 https://www.jianshu.com/p/5522470760c1
- Linux内核入门到放弃-内核活动-《深入Linux内核架构》笔记
中断 中断类型 同步中断和异常.这些由CPU自身产生,针对当前执行的程序 异步中断.这是经典的中断类型,由外部设备产生,可能发生在任意时间. 在退出中断中,内核会检查下列事项. 调度器是否应该选择一个 ...
- Parallel 类并行任务(仅仅当执行耗时操作时,才有必要使用)
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...