使用vue脚手架构建项目

一、前言

	* 创建好vue-cli的环境，下载好vue包依赖
	* 本文使用环境：@vue/cli 5.0.8

二、步骤

1. 创建vueTest文件夹，管理员身份运行cmd , 进入到vueTest文件夹

2. 执行命令vue create 你的项目名 ，这里我定义的项目名为: my-project

• 基于交互式命令方式，创建项目
• 文件名 不支持驼峰（含大写字母）使用短横线方式

3. 选择自定义安装,点击回车

   

4. 在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车
   

5. 选择创建vue项目的版本，我选择的vue2
   

6. 按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)

   

7. 选择项目配置文件单独存放

   

8. 是否保存模板,选择n 不创建
   

9. 安装完成,提示输入执行下面这两个命令

   

10. 进入项目目录 cd my-project

11. 启动项目 npm run serve，项目部署完成显示：

    

​

12. 访问项目：http://localhost:8080/

    

13. 停止项目 只要关闭命令行窗口就可以

    ​

三、项目结构

1. 用vscode打开项目目录

2. 结构介绍

   

四、vue配置文件介绍

1. package.js

   

2. 单独的配置文件配置项目

   配置说明: 该配置设置打包时服务器相关的信息

   • port : 访问端口

   • open true: 打包完成自动打开浏览器

   操作步骤

   • 需要修改vue.config.js，配置文件原内容为：

     const { defineConfig } = require('@vue/cli-service')
     module.exports = defineConfig({
       transpileDependencies: true
     })
     
     

   • 修改为：

     const { defineConfig } = require('@vue/cli-service')
     module.exports = defineConfig({
       transpileDependencies: true,
       devServer:{
         "port":8899,
         "open":true
       }
     })
     

3. 在vscode中启动项目

   • 打开终端

     

   • 输入命令npm run serve

   • 运行后发现端口号改为 8888,并且在打包完成后自动打开浏览器

     

五、组件的模块化开发

1、组件化开发

组件化是Vue的精髓，Vue项目就是由一个一个的组件构成的。 我们主要的工作就是开发的组件.

2、组件介绍

1. 简介

   我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件. 每一个*.vue 文件都是一个组件 ，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。

2. 常见组件

   • 页面级别的组件

     页面级别的组件，通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面

   • 业务上可复用的基础组件

     这一类组件通常是在业务中被各个页面复用的组件，这一类组件通常都写到 components 目 录下，然后通过import在各个页面中使用

3、组件的组成部分

• template : 组件的HTML部分
• script: 组件的JS脚本 (使用ES6语法编写)
• style: 组件的CSS样式

<!-- 1.template 代表html结构, template中的内容必须有且只有一个根元素
 编写页面静态部分 就是 view部分 -->
<template>
    <div>
       测试页面...
    </div>
</template>
<!-- 2.编写vue.js代码 -->
<script>
    //可以导入其组件
    // import Header from '../components/header.vue' 
    
    //默认写法, 输出该组件
    export default {
     name:"Home", // 组件名称，用于以后路由跳转
        data() {// 当前组件中需要使用的数据
            return {}
       },
      methods: {}
   }
</script>
<!-- 编写当前组件的样式代码 -->
<style scoped>
 /* 页面样式 加上scoped 表示样式就只在当前组件有效*/
</style>

后续关于搭建的项目运行流程，可参考博客：vue-cli项目运行流程介绍