day 68 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 creat 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件

 

可视化创建项目

 cmd中写vue ui

 

 

 

 

 

 

 

 

 pycharm 管理vue项目

 

 

 

 项目目录介绍

 

项目生命周期

 

 

* 1、启动项目，加载主脚本文件 main.js
*      加载Vue环境，创建根组件完成渲染
*      加载系统已有的第三方环境：router、store
*      加载自定义的第三方环境与自己配置的环境：后期项目不断添加
*
* 2、router被加载，就会解析router文件夹下的index.js脚本文件，完成 路由-组件 的映射关系
*
* 3、新建视图组件.vue(在views文件夹中)，在路由中配置(在router的index.js中)，设置路由跳转(在导航栏组件中Nav.vue)

 

 

 

 

 

vue请求生命周期：
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的占位符
注： i) 可以用 用户页完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转

 

文件式组件

 

<template>
    <div class="home">
        <Nav />
        <h1>主页h1>
    div>
template>


<script>
    import Nav from '../components/Nav'

    export default {
        data(){
            return {
                back_data: ''
            }
        },
        methods: {},
        components: {
            Nav,
        },
    }
script>


<style scoped>
style>

 

配置自定义全局样式

在src文件下的assets下面的css文件中写全局的css样式

再到main.js里面配置，才会起作用（加载写的css文件，有文件后缀）

配置全局样式：@就代表src文件夹的绝对路径（可以用..来查找路径），官方提倡require加载静态文件

 

 

 

 

 wa