How to build a Multi-user Notebook Application with Vue3, Vuex and Firebase: Get started with Vue!
Part 1: Installing Vue
This is my journey to develop a multi-user notebook application. This article is how and why I set up a Vue app with Vue CLI.
Installing Vue and run a Vue app is not really hard. When we need to make a big project we want to have lots of developing tools included, things get complex and annoying. Vue CLI help us to make this process easier. Let's take a look at what Vue CLI has and how it works.
What is Vue CLI?
The full name is Vue.js Command-Line Interface. Using @vue/cli make our life be easier. (We need to install Node.js before installing vue)
npm install @vue/cli
yarn add @vue/cliThe CLI Plugins allows us to select which libraries our project would be using and automatically plugs them into the project. Such as eslint and babel. CLI Serviceincludes webpack and webpack-dev-server. CLI Service configures Webpack so when we deploy our app all of our JavaScipt, CSS and dependencies get properly bundle together optimized and minified resulting in a faster loading speed.
It also allows us to write in HTML, CSS and JavaScript however we like. Such as Vue SFC, TypeScipt, SCSS, Pug and the latest versions of ECMAScript. And in develop mode it enables hot module replacement(HMR) which means changes to our app will update live whenever we save our project.
What is Vue SFC?
The full name is Single-File Component. Every File called .vue is SFC. It makes our code easier to edit. Everything can write in the same file. Here is a website shows how SFC transfer real-life coding:
If we want to use SFC format to write our code. The structure of the files needs to be more complete. In this case, we install vue/cli which is automatically generate the right files structure for us to use SFC.
Get Start
Install @vue/cli and it will shows like this in the file package.json
Sometimes we run into errors like this:
Failed to compile with 1 errorSyntex Error: TypeError: Cannot read property ‘parseComponent’ of undefined.
This means our “vue” and “@vue/compiler-sfc” probably has a different version. Recommend to delete the node modules folder to reinstall again.
~ will install the latest version.
^ will install the latest version at the same level which won’t jump to a different integer version.
After setting up the Vue app we can run the comment yarn build and yarn serve to check it out.
The next Article is about Vue Router:
Others articles:
Part 3: Firebase Auth Implementation
Part 4: Using Firebase to add profile
Part 5: Using TipTap
Get the Code
you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code.
Hope you have a lovely coding journey. Find me on IG! I am a freelance theatre maker.
