Ape Creation Essay | [Vue five minutes] Vue Cli scaffolding to create a project

Disclaimer: This blog post was recorded by bloggers on the way to learn Vue. There are many blog posts related to Vue Cli scaffolding construction projects related to bloggers in this C station. Everyone has a lot of steps. If there are any similarities, it is a coincidence!

1. Steps to create a project

Step 1: This blogger mainly uses the Visual Studio Code development tool for experimental development. We can use this development tool to learn together, and use the cd command on the terminal command line to switch to the folder where the project file is saved.

Step 2: Enter our creation command "vue create qbtapp" in the terminal. qbtapp is the name of the project I defined myself, but we should pay attention that the name must be all lowercase, otherwise an error will occur.

Next step:

If you have reported an error when creating a file according to the second step: VSCode reported an error: vue : The file E:\nodejs\node_global\vue.ps1 cannot be added, because scripting is prohibited on this system. Then, you can solve it by running the command step by step according to my solution. Here is an error demonstration for everyone to see. If there is no wrong partner, then the root number is the root number. If there is an error, you can follow my method. finished editing:

When the modification is completed, we can see the following configuration items:

The configuration options we have here are the configuration saved by the project we created earlier. We can use the up and down keys to select the existing configuration. Generally, manual automatic configuration is used. We can configure it according to the needs of the project. I use the blogger here. The "Manually select features" manual custom configuration. Then select this and we can see the following screen:

We will give a detailed introduction to each function, you can also translate Baidu, there are many methods:

We just use the three functional options here. After selecting Enter, we will enter the next prompt interface.

After clicking, we enter the following interface:

select routing mode

We are in the "history" mode here, press Enter or enter a capital Y, and then enter the next interface;

Select CSS precompiler

We can make a variety of corrections. You can choose the pre-compilation of CSS you need to use. We choose Less here, select and press Enter to go to the next interface;

Choose how to store the configuration

What we choose is to store these selected configurations in the file in package.json format, as shown in the figure above, click "In package.json", and then we can enter the next interface;

The above figure means: whether to save the current configuration for later use, if the current configuration is selected, then this configuration can be used by projects with the same configuration created later, of course, we can also not save it. If you want to save, enter "Y", and enter a file name when you want to save. as follows:

Then we wait for the download here.

Automatically download package files required by the project

After waiting for the vue plugin to be downloaded and installed successfully, we can see the following interface, and the prompt "cd qit" means that we can enter our root directory, and then we can run our command "npm run serve". Start our project.

2. Start the vue project

1. Project directory

According to the above operations, we have already downloaded the configuration files, vue has downloaded these files to our folder, we can take a look;

2. Start the project

Run the command "npm run serve" through the terminal, and wait for the completion of the software change, and then the URL of our running website can be displayed. As shown below:

3. The browser opens the project home page interface

We click on our website through "Ctrl+click": http://localhost:8080/, that's it, we can display the interface of the default instance project of vue, as follows:

At this point, our default instance project is started and completed.

3. Project configuration directory and files

After we executed the command line "vue create qbt", our E disk created a new directory "qbt" for our directory. There are many configuration directories and files under this project. We can explain what these files mean and what their functions are, as shown in the following figure:

If you type the description below, it will be annoying for everyone to read, and it is also annoying for me to write, so I can just write it directly on the screenshot, it is convenient for everyone to read, and I also understand it.

1. public directory

There are two more files under our public directory:

One is the favicon.ico file, which is the icon file of the project;

The other is, index.html, which is a template file, which can generate the entry file of the project, and the js and css packaged by webpack will also be in this file. When the browser accesses the project, the generated index.hrtml file will be opened by default. The content of this file can be as follows:

2. src directory

We also give a small description of the directory under the src directory, or simply mark it on the screenshot. You can see the scene clearly, as follows:

assets: store the resource files that the directory needs to use, such as css, images, etc.
components: store some public components in vue development
router: store routing configuration files
Views: Stores page-level components, such as login.vue (login interface) in our development process, and two components of our instance, which we have seen before, that is about.vue and home.vue.

When we create in main and js, we also need to configure it. The effect after the configuration is completed should be as follows:

import { createApp } from 'vue'  //引入你生成的文件
import App from './App.vue'   //引入生成的顶级组件
import router from './router'   //引入路由
import Vue from 'vue'     //引入vue

createApp(App).use(router).mount('#app')  
new Vue({    //创vue实例
    router,   //传入路由
    render:h=>h(App)  //传入顶级组件
}).$mount('#app')  //挂载DOM

3. router directory

We can see an index.js file by clicking on the router directory. This is the file for our routing configuration. Click to configure the code. The configured example code is as follows (the comments are already in the code):

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

//创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),//模式
  routes
})

export default router  //导出路由

4. Project example effect display

We have completed the construction of the opening environment here, and we have completely completed the preliminary work, then we will start the envy of small development experiments. We can experiment with an instance, such as clicking a function on a navigation bar to connect to the content interface of the corresponding function.

First of all, we want to experiment with this interface. We should first delete all the components in the default instance code of vue, including the entire view folder and the .vue file in the components folder, and then follow the steps below to complete the new project. development.

1. Create a new single file

In the deleted view folder, create three new .vue components with corresponding functions. These three components are used for experiments. These three names are the module names when the editor completed the design, so use this as a commemoration! Then write our code for these three new file components respectively, the code is as follows:

The code of the template of the three modules can be seen through the split screen.

2. Routing configuration

Configure the routing of our project in the index.js file under the router directory, which is the same as the above. First, delete the default routing configuration of our original instance, and then we write our own code. The code is as follows:

//import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/News',
    name: 'News',
    component: () => import('../views/News.vue')
    //这个方式根据自己的需要进行加载的
  },
  {
    path: '/Remote',
    name: 'Remote',
    component: () => import('../views/Remote.vue')
    //这个方式根据自己的需要进行加载的
  }
]

//创建路由实例
const router = new VueRouter({
  mode: 'history',
  base:process.env.BASE_URL,
  routes
})

export default router//导出路由

3. Configure routing navigation in App.vue

After configuring routing, we also need to configure our navigation and routing entry on our App.vue component, otherwise we will not be able to jump successfully! Our modified code is as follows:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link>|
      <router-link to="/News">信息</router-link>|
      <router-link to="/Remote">远程</router-link>

    </div>
    <router-view/>
  </div>
</template>

<style lang="less">

#nav {
  padding: 30px;

a {
  font-size: 20px;
}
}
h1 {
  font-size: 40px;
}
</style>

Finish!