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

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

Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue_第1张图片

二、新建一个Vue.js项目 

Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue_第2张图片

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

三、项目启动

Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue_第3张图片 四、项目目录结构

Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue_第4张图片

'''
-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





修改App.vue

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

效果图

Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue_第5张图片

你可能感兴趣的:(Vue.js)