懵懂少年初识Vue

创建Vue项目

1、打开cmd跳转放vue项目的文件加下执行命令

vue init webpack projectName

2、设置项目名称（不能大写的？）

3、项目的描述（可不写）

4、项目的作者（可不写）

5、打包方式（第一个）

6、是否安装vue-router（是）

7、是否需要js语法检查（否，严格的语法格式要求）

8、是否安装单元测试工具（否）

9、也是一个测试工具（否）

10、选择第一个npm

11、到刚刚创建好的项目文件夹

12、初始化项目，安装项目所需要的包（npm i）

添加一个页面&修改配置

1、修改程序运行端口（cofig/index.js）

2、剪切src/App.vue中的图片标签到components/HelloWorld.vue中

3、剪切src/App.vue中的样式到components/HelloWorld.vue中

4、创建components/FirstVueApp.vue

<template>
    <div align="center">
      {{msg}}
    </div>
</template>

<script>
export default {
  name: "FirstVueApp",
  data(){
    return{
      msg: 'This is my first vue project',
    }
  }
}
</script>

<style scoped>

</style>

5、配置路由

//routes数组中添加
{
      path: '/first',
      name: 'first',
      component: () => import('../components/FirstVueApp')
    }

6、启动项目

npm run dev