LukeParke/vercel
1
0
Fork 0
mirror of https://github.com/LukeHagar/vercel.git synced 2025-12-06 04:22:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update example to Vue 3. (#7314)

Browse Source
This commit is contained in:
Lee Robinson
2022-01-17 19:06:51 -06:00
committed by GitHub
parent 5bd0e0f6ca
commit ec6a645d3f
9 changed files with 2363 additions and 2114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/vue/.gitignore vendored
View File

@@ -2,16 +2,16 @@
node_modules node_modules
/dist /dist
# local env files # local env files
.env.local .env.local
.env.*.local .env.*.local
.env
.env.build
# Log files # Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log*
# Editor directories and files # Editor directories and files
.idea .idea

1
examples/vue/.vercelignore
View File

@@ -1 +0,0 @@
README.md

32
examples/vue/README.md
View File

@@ -1,6 +1,4 @@
![Vue.js Logo](https://github.com/vercel/vercel/blob/main/packages/frameworks/logos/vue.svg) # Vue.js
# Vue.js Example
This directory is a brief example of a [Vue.js](https://vuejs.org/) app that can be deployed with Vercel and zero configuration. This directory is a brief example of a [Vue.js](https://vuejs.org/) app that can be deployed with Vercel and zero configuration.
@@ -12,18 +10,26 @@ Deploy your own Vue.js project with Vercel.
_Live Example: https://vue.examples.vercel.com_ _Live Example: https://vue.examples.vercel.com_
### How We Created This Example ## Running Locally
To get started with Vue.js deployed with Vercel, you can use the [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) to initialize the project: ```
yarn install
```shell
$ vue create
``` ```
### Deploying From Your Terminal #### Compile and hot-reload for development
You can deploy your new Vue.js project with a single command from your terminal using [Vercel CLI](https://vercel.com/download):
```shell
$ vercel
``` ```
yarn serve
```
#### Compile and minify for production
```
yarn build
```
#### Lint and fix files
```
yarn lint
```

2
examples/vue/babel.config.js
View File

@@ -1,5 +1,5 @@
module.exports = { module.exports = {
presets: [ presets: [
'@vue/app' '@vue/cli-plugin-babel/preset'
] ]
} }

35
examples/vue/package.json
View File

@@ -1,25 +1,22 @@
{ {
"name": "vue",
"version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"dev": "vue-cli-service serve --port $PORT",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"core-js": "^2.6.5", "core-js": "^3.6.5",
"vue": "^2.6.10" "vue": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "^3.9.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "^3.9.0", "@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.0.1", "@vue/compiler-sfc": "^3.0.0",
"eslint": "^5.16.0", "babel-eslint": "^10.1.0",
"eslint-plugin-vue": "^5.0.0", "eslint": "^6.7.2",
"vue-template-compiler": "^2.6.10" "eslint-plugin-vue": "^7.0.0"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
@@ -27,21 +24,17 @@
"node": true "node": true
}, },
"extends": [ "extends": [
"plugin:vue/essential", "plugin:vue/vue3-essential",
"eslint:recommended" "eslint:recommended"
], ],
"rules": {},
"parserOptions": { "parserOptions": {
"parser": "babel-eslint" "parser": "babel-eslint"
} },
}, "rules": {}
"postcss": {
"plugins": {
"autoprefixer": {}
}
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
"last 2 versions" "last 2 versions",
"not dead"
] ]
} }

4
examples/vue/public/index.html
View File

@@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue</title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

10
examples/vue/src/App.vue
View File

@@ -1,15 +1,13 @@
<template> <template>
<div id="app"> <img alt="Vue logo" src="./assets/logo.png">
<img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template> </template>
<script> <script>
import HelloWorld from './components/HelloWorld.vue' import HelloWorld from './components/HelloWorld.vue'
export default { export default {
name: 'app', name: 'App',
components: { components: {
HelloWorld HelloWorld
} }
@@ -18,7 +16,7 @@ export default {
<style> <style>
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;

8
examples/vue/src/main.js
View File

@@ -1,8 +1,4 @@
import Vue from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
Vue.config.productionTip = false createApp(App).mount('#app')
new Vue({
render: h => h(App),
}).$mount('#app')

4381
examples/vue/yarn.lock
View File

File diff suppressed because it is too large Load Diff