【来源】：https://www.runoob/vue2/vue-install.html

【菜鸟教程】学习笔记

• 一、【安装与运行】
• 二、【项目结构】
• 三、【起步】
• • （一）你好，南方。
  • （二）路由的使用

一、【安装与运行】

// 升级 npm
cnpm install npm -g
// 升级或安装 cnpm
npm install cnpm -g
// 全局安装 vue-cli
cnpm install --global vue-cli
// 创建一个基于webpack模板的新项目
vue init webpack mywork
// 后面需要进行一些配置，默认回车就可以
// 完事后
cd mywork
cnpm install
cnpm run dev

二、【项目结构】

三、【起步】

注：起步前，可以先把vue的规范去掉，避免代码中有多余空格空行就报错。
解决方法：【BUG日记】【Vue】空格和空行会报错

（一）你好，南方。

修改src目录里的components目录下的HelloWorld.vue文件

// 内容替换为以下
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '你好，南方。'
    }
  }
}
</script>

// 在终端运行
npm run dev

（二）路由的使用

【借鉴】：https://blog.csdn/a772304419/article/details/104991233
在components下创建三个文件List.vue，About.vue，MyApp.vue

修改router下的index.js文件

启动