You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
2.0 KiB
Markdown

6 years ago
# real-world-vue
6 years ago
## Best Practices:
- Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
- Reusable componets should be located in the components directory.
- Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
- Use redirects in `routes.js` if your app was in production to prevent issues with external linking to you site. You can use an `alias` property instead, but this could mean in SEO there could be 2 pages with the same content.
6 years ago
## Project setup
6 years ago
6 years ago
```
npm install
```
### Compiles and hot-reloads for development
6 years ago
6 years ago
```
npm run serve
```
### Compiles and minifies for production
6 years ago
6 years ago
```
npm run build
```
6 years ago
The `chunk-vendors.#####.js` file is contains all the dependencies of our app.
The `app.###.js` is the app file that contains all of the code to mount and render our app.
The `<link href=/js/about.######.js rel=prefetch>` was included in the head of our built index file. the use of the `rel=prefetch` in this tag declaratively lets us specify resources that our pages will need very soon after loading. Therefor the browser should preload early in the lifecycle before the broswer's rendering machinery kicks in. This makes sure that the resource is available earlier and less likely to block the page's first render. See [MDN preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)
This prefetch occurred because in the router we have a lazy loading declaration.
```
{
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
}
```
6 years ago
### Run your tests
6 years ago
6 years ago
```
npm run test
```
### Lints and fixes files
6 years ago
6 years ago
```
npm run lint
```
### Customize configuration
6 years ago
6 years ago
See [Configuration Reference](https://cli.vuejs.org/config/).