Java Spring Boot + Vue 实习项目2：如何使用Vue CLI

1. 第一次使用Vue, Vue CLI
    1.1 安装Node.js运行环境，其中包含NPM包管理工具，安装好后就可以通过npm命令下载js包了。
    1.2 安装cnpm镜像，提高访问速度：npm install -g cnpm
    1.3 通过cnpm安装Vue CLI：cnpm install -g @vue/cli
2. 使用Vue CLI建立项目
    2.1 建立存放前端项目的文件夹：cd xxx， mkdir example
    2.2 在example中建立新项目：vue create demo（demo为项目名）
    2.3 依次选择以下项：
        Manually select features
        Babel & Router（Babel是一个插件，用为编译打包时适应低版本；Router是路由器，管理路径和对应的模块）
        n（不使用history mode）
        In package.json（在这里存放config）
        N（不保存preset）
    2.4 等待下载完成，进入路径，启动项目：cd demo，npm run serve
    2.5 现在打开浏览器进入屏幕显示的端口号界面，即可看到欢迎界面。
    2.6 进入项目文件夹，引入必要的js组件
        axios：cnpm install axios -S
        font-awesome：cnpm install font-awesome -S
        Element UI：cnpm i element-ui -S
    2.7 在package.json中添加：
        "vue": {
         "publicPath":"./"
        }
    2.8 将索尔科技的两个文件夹替换。
3. 如何使用Vue
    3.1 使用Visual Studio Code打开demo项目，找到view/index.vue，发现vue文件由3部分构成：HTML、JS、样式表
        找到index.js路由器配置
    3.2 在view文件夹中创建my.vue
        <template>
        <div>
            <input type="text" v-model="info"/>
            Hello World
            {{info}}
            <div>
                <input type="checkbox" v-model="ok"/>{{ok}}
                <div v-for="n in arr" :key="n">{{n}}</div>
            </div>
        </div>
        </template>

        <script>
        export default {
            //data()返回一个js对象，该对象描述了vue的数据部分，这些数据一般与页面进行绑定
            data(){
                return {
                    info: "Hello World Message",
               ok: "true",
                    arr:["xxx", "yyyyy", "zzzzzz", "xxxx", "大家好"]
                };
            }
        }
       </script>

        <style scoped>

        </style>

        说明：
        scoped：样式表只在本页面有效
        data(){}中return的是定义的字符串、bool值和定义的数组
        上面的html中可以通过{{变量名}}调用
    3.3 所有的vue在index.js中配置
           import My from '../views/my.vue'
         在routes中增加
         {
            path: "/my",
            name: "Index",
            component: My
        }