create-vue is a scaffolding tool for Vue apps. It replaces Vue CLI as the recommended way to create Vue SPAs (Single Page Apps). Today we will check out create-vue, see how it works, and build an app using it.
create-vue automates the creation of a new Vue 2 or Vue 3 app using Vite. Vite is an extremely fast build tool created by the Vue team. Where Vue CLI has its own Webpack-powered build pipeline, create-vue just scaffolds an app. This approach offers more flexibility, as you can use any plugins and configurations that work with Vite, but it is still very simple to use. Additionally, create-vue is a lot faster than Vue CLI due to Vite's optimization. Without further ado, let's get started.
Creating An App With Create-Vue
First, make sure you have Node.js and npm installed. You check do this by running npm -v:
npm -v 8.19.1
If you do not have Node.js, you can install it by going to the Node.js download page. After you do that, open a terminal in the folder you want the project to be in. Then, run npm init vue@3. It will ask you to install create-vue. Then you will have to configure a few things, which I will guide you through.
First, you need to decide on a name for your projects. I set the name to create-vue-example, but you can set it to whatever you want.
Next, create-vue will ask you whether you want to use TypeScript. This is just a basic example, so lets set that to no.
Next it will ask you whether you want to add JSX. Once again, because this is a basic example, let's just say no.
For the rest, select yes for Vue Router, ESLint, and Prettier, and select no for the rest. At the end, your terminal should look something like this:
Now, as the instructions say, cd into the directory of the project, install its dependencies with npm install and run npm run dev. It should give you a link to a local server. Click on the link and you should see something like this:
Congratulations! You just created your first Vue app with create-vue! If you want to build it for deployment, you can run npm run build Now, lets dig into the code.
Exploring the Code
After you finish setting everything up, the file structure should look something like this:
| File or Folder | Description |
|---|---|
| .vscode | A folder for configuring VS Code to work best with this app. You can safely ignore it. |
| node_modules | Contains all of your dependencies. You generally avoid touching this folder, as npm manages it automatically. |
| src | Where all of your source code will live. Most of the time, you will be working in this folder. |
| .eslintrc.cjs | Configures ESLint—a tool that helps catch bugs at compile-time. |
| .gitignore | Tells Git what files to ignore (for example node_modules). |
| .prettierrc.json | Configures Pretier—a formatting tool. |
| index.html | This is the skeleton HTML file for your app. It is populated using the Vue components and scripts in src. You might need to do something to it at some point, but right now, just leave it as is. |
| package-lock.json and package.json | The package.json contains a lot of the npm configuration, so you will likely have to configure it. On the other hand, package-lock.json just caches package version information, so you do not need to do anything with it. |
| README.md | Describes your project to other developers in GitHub. |
| vite.config.js | The main configuration file for Vite. |
Next, lets take a look at the src folder:
| File or Folder | Description |
|---|---|
| assets | A folder to store CSS, images, and other static assets. |
| components | This folder is for (you guessed it!) Vue components. |
| router | Includes all of the code for Vue Router, which is what allows your app to function as a single-page application. |
| views | Contains the actual "pages" of the app. |
| App.vue and main.js | The base page shell and rendering script respectively |
Now that we have looked at the files, lets try customizing the build pipeline with plugins.
Customizing the Build Pipeline With Plugins
Plugins can be very helpful for developing more efficiently. For example, let's say you wanted to implement a custom font from Google Fonts. You could just use the link Google Fonts gives you on your website to automatically download the font. However, Google Fonts can be quite slow. Luckily, there are solutions. You could self host the font using something like Google Webfonts Helper, but that can be a lot of effort. Luckily, plugins come to the rescue here. Using vite-plugin-webfont-dl, you can link to fonts on Google Fonts as you would normally do and the plugin handles all of the transformation.
How to Add a Plugin
Adding a plugin is very simple. First, we need to install it by running npm install --save-dev plugin-name or in this case, npm install --save-dev vite-plugin-web-dl. Next, we need to add it to the Vite config. First, go to vite.config.js and import the plugin like this:
import webfontDownload from 'vite-plugin-webfont-dl';
Next, you will need to put the plugin in the plugins array of your configuration.
plugins: [vue(), webfontDownload()],
Now, your vite.config.js should look something like this:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import webfontDownload from 'vite-plugin-webfont-dl';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), webfontDownload()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
Now you can load fonts by simply pasting in the HTML given to you by Google Fonts, and they will automatically be optimized!
Using Environment Variables
If you want to easily access configuration from your code during the build process, you might want to use environment variables. Vite allows you to load variables from file and replace calls to the variable with its value during the build process. For example, lets say you wanted to easily configure the database URL that your code used. You would first create a .env file in your project directory. In that file, put something like this:
VITE_DB_URL=https://url
The variable name does not matter, as long as it starts with VITE_. Now, in order to access it your code, you need to refer to it like this:
console.log(import.meta.env.VITE_DB_URL)
Then, when Vite compiles your project, that code will be transformed into something like this:
console.log("https://url")
Vite also includes some built in environment variables, like import.meta.env.PROD.
if (import.meta.env.PROD) {
// App is being compiled for deployment
} else {
// App is in development mode
}
Conclusion
Now you know your way around create-vue and Vite! These tools allow us to easily set up a Vue app with fast development and powerful configuration. If you would like to learn more, check out the Vite Documentation, and if you would like to look at some other options, check out Vitepress and Nuxt. Thanks for reading!
No comments:
Post a Comment