搭建vue-cli
时间:2019-10-22
本文章向大家介绍搭建vue-cli,主要包括搭建vue-cli使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
VUE-CLI 脚手架
1.什么是vue-cli
vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included
的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本。
2.安装
npm install -g @vue/cli
3.创建项目
vue create hello-world
vue ui
4.启动项目
npm run serve
npm run build
5.自定义脚手架
用户文件夹.vuerc
如何删除自定义脚手架
6.添加插件的方式
vue add vuetify
7.全局环境变量
.env文件与.env.development文件
VUE_APP_XX=。。。。
<template>
<div>
{{ base }}
</div>
</template>
<script>
export default {
data(){
return{
base:process.env.VUE_APP_BASE
}
},
name:'Nav',
components: {
},
props:[]
}
</script>
<style lang="less">
</style>
// App.vue
<template>
<v-app>
<Nav/>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import Nav from './components/Nav'
export default {
name: 'App',
components: {
HelloWorld,Nav
},
data () {
return {
//
}
}
}
</script>
8.独立运行的VUE
vue serve name.vue
需要全局安装运行环境
npm i @vue/cli-server-global -g
9.图形构建项目
10.配置vue.config.js
module.exports=
{
baseUrl: //根路径
outputDir: //输出路径
assetsDir: //静态资源
lintOnServer:false //是否开启eslint
devSer:
{
open
host
port
https
hotOnly
proxy:{
//跨域
‘/api’:{
target:”http://api.localhost:80/api”
ws:true,
changeOrigin:true,
pathRewrite:{
‘^/api’: ‘’
}
}
}
}
}
11.获取数据
before(app){
app.get(‘/api/goods’,(req,rep)=>{
rep.json(data);
})
}
12.文件配置
原文地址:https://www.cnblogs.com/topsyuan/p/11722443.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- elasticsearch query里面的slop选项
- 彻底明白Android设计模式—(动态)代理模式
- elastic search 如何将yellow 状态变为green健康状态
- All clients has disconnected from. You can graceful shutdown now., dubbo version: , current host
- Failed to instantiate org.mybatis.spring.SqlSessionTemplate Constructor threw exception
- 护网之Linux应急处理操作手册
- 对新版安全狗学习
- redis key的删除策略及LRU的实现
- 护网Linux应急处置操作手册-Tools篇
- 加密,编码三问
- 我是怎么挖掘yii2反序列化0day的
- yii2反序列化后续
- 线程基础三问——猫眼真题
- V8引擎对Array.prototype.push的源码实现
- HTTPS三问—腾讯真题