• vue项目创建


    Vue项目环境搭建

    """
    node ~~ python:node是用c++编写用来运行js代码的
    npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm
    vue ~~ django:vue是用来搭建vue前端项目的
    
    1) 安装node
    官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
    
    2) 换源安装cnpm
    >: npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    3) 安装vue项目脚手架
    >: cnpm install -g @vue/cli
    
    注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤
    npm cache clean --force
    """
    
    

    Vue项目创建

    1) 进入存放项目的目录
    >: cd ***
    
    2) 创建项目
    >: vue create 项目名
    
    3) 项目初始化
    

    pycharm配置并启动vue项目

    1) 用pycharm打开vue项目
    2) 添加配置npm启动
    

    vue项目目录结构分析

    ├── v-proj
    |	├── node_modules  	// 当前项目所有依赖,一般不可以移植给其他电脑环境
    |	├── public			
    |	|	├── favicon.ico	// 标签图标
    |	|	└── index.html	// 当前项目唯一的页面
    |	├── src
    |	|	├── assets		// 静态资源img、css、js
    |	|	├── components	// 小组件
    |	|	├── views		// 页面组件
    |	|	├── App.vue		// 根组件
    |	|	├── main.js		// 全局脚本文件(项目的入口)
    |	|	├── router
    |	|	|	└── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
    |	|	└── store	
    |	|	|	└── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
    |	├── README.md
    └	└── package.json等配置文件
    

    vue组件(.vue文件)

    # 1) template:有且只有一个根标签
    # 2) script:必须将组件对象导出 export default {}
    # 3) style: style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化)
    
    <template>
        <div class="test">
            
        </div>
    </template>
    
    <script>
        export default {
            name: "Test"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    全局脚本文件main.js(项目入口)

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
    
    
    改写
    import Vue from 'vue'  // 加载vue环境
    import App from './App.vue'  // 加载根组件
    import router from './router'  // 加载路由环境
    import store from './store'  // 加载数据仓库环境
    
    Vue.config.productionTip = false
    new Vue({
        el: '#app',
        router,
        store,
        render: function (readFn) {
            return readFn(App);
        },
    });
    
    
  • 相关阅读:
    android 使用Activity做窗口弹出(模拟Dialog)
    解决ListView 跟ScroolView 共存 listItem.measure(0, 0) 空指针
    基于iview使用jsx扩展成可编辑的表格
    vue token 过期处理
    组件通信 eventtBus
    组件通信 $ref
    组件通信 Provide&&inject
    Vue 生命周期
    layui token 过期 重新登陆
    Python(3) 进制转换
  • 原文地址:https://www.cnblogs.com/jinhongquan/p/12060534.html
Copyright © 2020-2023  润新知