vue-cli搭建项目过程_vue-c li 创建项目

一.前言

传统的前端项目架构：

指的就是一个项目中有很多个HTML文件，每一个HTML文件都是相互独立的，如果需要在页面中导入一些外部依赖的css,js文件，就需要在每一个html文件中都导入就会显得特别麻烦，而且这些外部依赖的css，js文件还都需要我们去官网下载。

现在的前端项目架构：

在一个node环境中构建项目，node(前端的开发环境)类似于后端的maven，与传统的前端项目架构不同的是，现在的前端项目架构中改为了单页面架构(一个项目中只有一个.html文件)，切换页面也是通过主页面去调用其他的组件(.vue文件)实现的。

二.什么是vue-cli？

   vue-cli是官方提供的一个脚手架，用于快速生成vue的项目模板，预先定义好的目录结构及基础代码，就好比在IDEA中创建maven项目时可以选择一个骨架项目，这个骨架项目就叫脚手架，可以使我们开发更为迅速。

1.主要的功能

1.具有统一的目录结构

2.可以本地调试

3.热部署

4.单元测试

5.集成打包上线

2.需要配置的环境

Node.js

简单地说Node.js就是前端js运行环境或者说是js语言解释器。

Node.js官方网址：

https://nodejs.org/en/download

测试Node.js环境是否安装完成：

打开控制台(ctrl+r)，输入node -v和npm -v，如果出现下面版本号证明安装环境完成。

三.使用HbuilderX创建一个vue-cli项目

1.创建项目

打开HbuilderX，找到新建项目，点击创建vue项目(2.6.10) vue-cli默认项目。

点击创建项目，vue-cli项目中会下载很多个项目依赖的外部组件文件，所以会下载的比较缓慢，下载完成后，项目中的结构如下：

2.启动项目 

项目创建完成后该如何启动项目呢？

在软件的左下角有一个命令行窗口(终端)中，输入npm run serve（这是启动命令），输入回车后，会出现访问地址。

这两个网址就是我们创建完成运行的网页了。

3.终端命令

命令行中还有那些命令呢？

1.在我们以后从网络中下载的前端程序中，有很多的程序中都是不会有node_modules文件夹的，因为此文件夹占用内存大，而且每个vue-cli项目中都会带有，所以一些程序员就认为没有必要将此文件夹也打包起来，在终端中有一个命令可以解决此问题：

npm install

在终端中输入此命令就可以对此项目下载项目依赖了。但是在下载之前需要先删除 package-lock.json 文件。

如果 package-lock.json 文件被删除后仍然出现，可以在终端中输入命令：

npm config set package-lock false

2.打包命令

npm run build 这个命令就像maven中打包为.jar包一样。

3.停止服务

ctrl+c，项目打开的是我们是不能在终端中书写命令代码的，这个时候就需要先停止服务。

四.组件路由

1.创建组件

组件(.vue文件)一般在src文件夹下创建。创建步骤如下图。

2.组件的一般格式

3.组件路由

我认为组件路由其实就是给项目中的每个组件定义一个地址。（个人认为，有不同见解的可以私信博主）

详细概念：Vue组件路由是指在Vue.js应用中，通过定义和管理路由来控制页面之间的跳转和展示。Vue组件路由可以使用Vue Router插件来实现，通过定义路由规则和对应的组件，可以实现不同路由路径对应不同的组件展示。

在vue组件路由中，一般使用<router-link>组件来创建导航链接(超链接)，<router-view>组件来展示对应组件的内容。可以通过路由参数，动态路由，嵌套路由等方式实现不同场景下的页面导航和展示逻辑。

在终端下载vue-router组件：

打开命令行(终端)：输入：npm i vue-router@3.5.3 下载vue-router插件包。

如果下载很慢或者装不上的话，就在终端中设置华为镜像源（亲测好用）:

终端输入:

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

然后再输入：npm i vue-router@3.5.3 下载vue-router插件包。

五.搭建步骤

1.创建router目录

创建index.js文件，我们就在这里去配置路由。

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
 
//导入自己项目中的组件
//import 名字 from '组件位置';
 
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
 
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
   {
     path: '/index', //组件地址
     name: 'index',
     component: index  //就是上面导入进来的组件名字
   },
   {
     path: '/content',
     component: content
   }
]
});
//导出路由对象
export default rout;

2.使用路由

3.在main.js中配置路由

 

rout.beforeEach((to,from,next)=>{
if(to.path=='/login'){如果用户访问的登录页，直接放行
    return next();
 }else{
       var token = window.sessionStorage.getItem("token");
       if(token==null){
            return next("/login");
        }else{
             next();
          }
       }
})