【Vue五分钟】 Vue Cli脚手架创建一个项目

前言

   声明：本博文是博主在学习vue的路上记录下来的，本C站有很多相关博主相关的Vue Cli脚手架搭建项目的相关的博文，大家的步骤都很多，如有雷同，实乃巧合！

一、创建项目的操作步骤

第一步：本博主主要使用的是Visual Studio Code开发工具进行实验开发的，我们可以使用这个开发工具一起学习，在终端命令行使用cd命令切换到保存项目文件的文件夹。

第二步：在终端输入我们的创建命令“vue create qbtapp”.qbtapp这个是我自己定义的项目的名字，但是我们要注意的是，命名一定全部都要小写，不然就会出现报错。

下一步：

如果大家有根据第二步在create创建文件的时候报错如此的话：VSCode报错：vue : 无法加文件 E:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。那么，大家可以按照我的解决方法一步步运行命令就可以解决，这里弄了一个错误示范给大家看，如果没有保错的小伙伴那就根号了，有报错的小伙伴可以根据我的方法完成修改：

当修改完成以后，我们就可以看到如下的配置的项目：

我们这里的配置选项是我们前面创建项目保存的配置，我们使用上下键就可以选择已有的配置，一般使用手动自动配置，我们大家可以根据项目的需求进行相应的配置，我们这里博主我使用的是“Manually select features”手动自定义配置。然后选择这个我们就可以看到下面的画面：

我们对每一个功能做一个详细的介绍，大家也可以百度翻译，方法有很多：

我们这里只是用一下三个功能选项就可以了，选完回车，我们就进入下一个提示界面。

点击完，我们进入到如下的界面：

选择路由模式

我们这里在“history”模式，回车或者输入大写的Y,都可以，然后进入到下一个界面；

选择CSS预编译器

我们可以进行多种端正，大家可以根据自己的需要使用的CSS的预编译进行选择，我们这里选择的是Less,选择并回车即可进到下一个界面；

选择如何存放配置

我们选择的是将这一些我们选择的配置存放到package.json格式的文件当中，如上图所示，点击“In package.json”，然后我们就可以进入到下一个界面；

上图代表的意思是：是否保存当前的配置以便以后使用，如果选择当前的配置，那么这配置可以供以后创建的相同配置的项目使用，当然我们也可以不保存。保存的那就输入“Y”，要保存的同时还要输入一个文件名。如下 ：

然后我们这里等待下载即可。

自动下载项目所需的包文件

等待vue插件下载安装成功以后，我们就可以看到下面的界面，有提示“ cd qit”就代表着可以进入到我们的根目录了，然后我们就可以运行我们的命令“npm run serve”就可以启动我们的项目。

二、启动vue项目

1、项目目录

  根据上面的操作，我们已经把配置的文件，vue已经将这一些文件下载到我们的文件夹里面了，我们可以看一下；

2、启动项目

通过终端运行命令“npm run serve”，等待软件变阿姨完成以后就可以显示我们的运行的网站的网址。如下图：

3、浏览器打开项目首页界面

  我们通过“Ctrl+单击”,点击我们的网址： http://localhost:8080/，就可以了，就可以显示vue的默认实例项目的界面，如下：

到这里，我们的默认的实例的项目就启动完成。

三、项目的配置目录和文件

   在我们执行了命令行“vue create  qbt”这个命令以后，我们的E盘就给我们的目录创建了一个新的目录“qbt”,这个项目下面有很多的配置的目录以及文件。我们可以一一的解释这一些文件都是什么意思以及功能作用是什么，如下图所示：

在下面打字说明的话，大家看的都烦，我写得也烦，干脆就直接在截图上面写入就好了，大家看的方便，我也学的明白。

1、public目录

   我们的public目录下面还有两个文件：

一个是，favicon.ico文件，这个是项目的图标的文件；

另一个是，index.html,这个是模板文件，可以生成项目的入口文件，webpack进行打包的js、css也会在这个文件中。浏览器访问的项目的时候，会默认打开生成好的index.hrtml文件，这个文件的内容可以如下所示：

2、src目录

src目录下的目录我们也进行小小的说明，还是简单的在截图上标明就好了，大家可以看的一幕了然，如下：

• assets:存放一下目录需要用到的资源文件，比如css、images等等
• components：存放的是vue开发当中的一些公共组件
• router:存放路由配置文件
• views:存放的是页面级别的组件，比如我们开发过程中的login.vue（登录界面）、还有我们实例的两个组件，我们前面也看过，那就是about.vue以及home.vue。

在main,js里面我们创建的时候，还要进行配置，配置完成后的效果应该如下：

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目录

  我们通过点击router目录可以看到一个index.js文件，这个就是我们路由配置的文件，点击下需要进行代码的配置，配置后的实例代码如下（注释已经在代码里面）：

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  //导出路由

四、项目实例效果展示

   我们到这里已经完成了开打环境的搭建工作，前期的工作我们已经完全完成了，那么我们就开始进行羡慕的开发小实验。我们可以实验一个实例，比如单击一个导航栏上面的一个功能就可以连接到该相应功能的内容界面。

    首先，我们要实验这个界面，应该先把vue默认实例代码里面的组件全部删掉，要删掉的有view整个文件夹以及components文件夹下的.vue文件，然后按照下面的步骤完成新项目的开发。

  1、新建单个文件

删掉了的view文件夹下新建三个.vue相应功能的组件，这三个组件是实验所用，这三个命名都是小编毕设的时候的模块命名，以此当做一种纪念吧！然后分别给这三个新的文件组件写上我们的代码，代码如下：

通过分屏可以看到三个模块的模板的代码就是如此。

2、路由配置

在router目录下面的index.js文件下配置我们这个项目的路由，还是和上面的一样，先第一步删掉我们原来实例默认的路由的配置，然后我们写入我们自己的代码，代码如下：

//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、在App.vue配置路由导航

   配置完路由，我们还需要在我们的App.vue这个组件上面配置我们的导航以及路由的入口，不然就无法跳转成功！我们修改后的代码如下：

<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>

完成！