Build modern Vue apps using Create-Vue and Vite

create-vue is a scaffolding tool for Vue apps. It replaces Vue CLI as the recommended way to create Vue SPA (single page app). Today we’ll go over create-vue, see how it works, and create an app that uses it.

create-vue automates the creation of a new Vue 2 or Vue 3 app using Vite. Screw is an extremely fast building tool created by the Vue team. Where the Vue CLI has its own Webpack-based build pipeline, create-vue simply creates an app. This approach offers more flexibility, as you can use any plug-in and configuration that works with Vite, but it’s still very simple to use. Furthermore, create-vue is much faster than Vue CLI thanks to the optimization of Vite. Without further ado, let’s get started.

Building an app with Create-Vue

First, make sure you have installed Node.js and npm. Verify that you do this by running npm -v:

If you don’t have Node.js, you can install it by going to the Node.js download page. Once you’ve done that, open a terminal in the folder you want the project to be in. So, run npm init vue@3. It will ask you to install create-vue. So you’ll need to configure a few things, which I’ll walk you through.

First, you need to decide on a name for your projects. I set the name to create-vue-examplebut you can set it as you want.

create-vue name promptcreate-vue name prompt

Next, create-vue will ask you if you want to use TypeScript. This is just a basic example, so set it to no.

create-vue typescript promptcreate-vue typescript promptcreate-vue typescript prompt

It will then ask you if you want to add JSX. Again, as this is a basic example, let’s just say no.

create-vue JSX promptcreate-vue JSX promptcreate-vue JSX prompt

For the rest, select yes for Vue Router, ESLint and Prettier and select no for the rest. In the end, your terminal should look like this:

vue-create the end promptvue-create the end promptvue-create the end prompt

Now, as the instructions say, cd in the project directory, 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:

create-vue template home pagecreate-vue template home pagecreate-vue template home page

Congratulations! You just created your first Vue app with create-vue! If you want to compile it for distribution, you can run it npm run build Now, let’s dig into the code.

Explore the code

After you’re done setting everything up, the file structure should look like this:

File or Folder Description
.vscode A VS Code configuration folder to work best with this app. You can safely ignore it.
nodes_modules It contains all your dependencies. You generally avoid touching this folder, as npm handles it automatically.
src Where all your source code will live. Most of the time you will work in this folder.
.eslintrc.cjs Configure ESLint, a tool that helps detect bugs at compile time.
.gitignore Tells Git which files to ignore (e.g. nodes_modules).
.prettierrc.json Configure Pretier, a formatting tool.
index.html This is the skeleton HTML file for your app. It is populated using components and scripts from Vue in src. You may need to do something at some point, but right now, leave it as it is.
package-lock.json And package.json The package.json contains much of the npm configuration, so you will probably need to configure it. On the other hand, package-lock.json it only caches package version information, so you don’t need to do anything with it. Describe your project to other developers on GitHub.
screw.config.js The main configuration file for Screw.

Next, let’s take a look at the src folder:

File or Folder Description
resources A folder to store CSS, images, and other static assets.
components This folder is for (you guessed it!) Vue components.
router It includes all the code for the 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 the rendering script, respectively

Now that we’ve gone through the files, let’s try customizing the build pipeline with plug-ins.

Build pipeline customization with plug-ins

Plugins can be very useful for more efficient development. For example, let’s say you want to implement a custom font from Google Fonts. You can simply use the link that Google Fonts offers you on your website to automatically download the font. However, Google Fonts can be quite slow. Fortunately, there are solutions. You can host the font yourself using something like Google Webfonts Helper, but it can be a lot of effort. Fortunately, plugins come to the rescue here. Using vite-plugin-webfont-dl, you can connect to fonts on Google Fonts as you normally would and the plugin handles all 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 Screw configuration. First, go to screw.config.js and import the plugin like this:

Next, you will need to insert the plug-in into the file plugins matrix of your configuration.

Now yours screw.config.js it should look like this:

Now you can load the fonts simply by pasting the HTML provided by Google Fonts and they will be automatically optimized!

Use of environment variables

If you want to easily access the configuration from your code during the build process, you may want to use environment variables. Screw allows you to load variables from the file and replace calls to the variable with its value during the build process. For example, let’s say you want to easily configure the database URL used by your code. You should first create a .env file in the project directory. In that file, put something like this:

The variable name doesn’t matter as long as it starts with VITE_. Now, to access your code, you need to reference it like this:

So when Vite compiles your project, that code will be transformed into something like this:

Vine also includes some built-in environment variables, such as import.meta.env.PROD.


Now you know how to create-vue and Lives! These tools allow us to easily set up a Vue app with fast development and powerful configuration. If you’d like to learn more, take a look at the Vite documentation, and if you’d like to look into some other options, check out Vitepress and Nuxt. Thanks for reading!

Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *