使用vue脚手架构建项目

一、前言

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

二、步骤

创建vueTest文件夹，管理员身份运行cmd , 进入到vueTest文件夹
执行命令vue create 你的项目名 ，这里我定义的项目名为: my-project

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

选择自定义安装,点击回车
在这列表中,选择我们要安装的组件,使用空格键选择,选好后回车
选择创建vue项目的版本，我选择的vue2
按回车之后,提示选择什么模式的路由,我们输入 n (表示选择hash模式)
选择项目配置文件单独存放
是否保存模板,选择n 不创建
安装完成,提示输入执行下面这两个命令
进入项目目录 cd my-project
启动项目 npm run serve，项目部署完成显示：

访问项目：http://localhost:8080/
停止项目只要关闭命令行窗口就可以

三、项目结构

用vscode打开项目目录
结构介绍

四、vue配置文件介绍

package.js

单独的配置文件配置项目

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

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

在vscode中启动项目
- 打开终端
- 输入命令npm run serve
- 运行后发现端口号改为 8888,并且在打包完成后自动打开浏览器

五、组件的模块化开发

1、组件化开发

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

2、组件介绍

简介

我们用 vue-cli 脚手架搭建的项目，里面有很多，如 index.vue 或者 App.vue 这一类的文件. 每一个*.vue 文件都是一个组件，是一个自定义的文件类型, 比如 App.vue 就是整个项目的根组件。
常见组件
- 页面级别的组件
  
  页面级别的组件，通常是 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>