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.
First, make sure you have Node.js and npm installed. You check do this by running
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.
After you finish setting everything up, the file structure should look something like this:
Next, lets take a look at the src folder:
Now that we have looked at the files, lets try customizing the build pipeline with plugins.
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:
Next, you will need to put the plugin in the
plugins array of your configuration.
Now, your vite.config.js should look something like this:
Now you can load fonts by simply pasting in the HTML given to you by Google Fonts, and they will automatically be optimized!
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:
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:
Then, when Vite compiles your project, that code will be transformed into something like this:
Vite also includes some built in environment variables, like