Vue.js入门（四）---用Pycharm创建你的第一个完整的HelloVue

一、在Pycharm中下载Vue.js插件

二、新建一个Vue.js项目 

然后等待安装启动完成，这里提示我要不要用淘宝源，我果断同意啊

三、项目启动

 四、项目目录结构

'''
-node_modules：项目的依赖

-public
    -favicon.ico  网页的图标
    -index.html   主页面
-src：我们需要关注的
    -assets：方静态文件
    -components：小组件
    -views  ：页面组件
    -App.vue ：主组件
    -main.js ：项目主入口js
    -router.js： 路由相关，以后配置路由，都在这里配置
    -store.js  ：vuex相关，状态管理器

-package.json   项目的依赖文件
'''

 五、修改默认的启动页

在components下新建一个HelloVue

<template>
    <div class="hello">
        <h1>{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        name: "HelloVue",
        data () {
        return {
            msg: 'HelloVue'
            }
        }
    }
</script>

<style scoped>

</style>

修改App.vue

import HelloWorld from './components/HelloVue.vue'

效果图