Vue-cli

vue-cli创建项目

1.下载node解释器
    在node官网中下载node解释器，安装时一直下一步就行
2.验证
    node下载完是自动添加环境变量的，可以在cmd中输入node来验证
3.安装vue-cli
    npm install -g @vue/cli  # 使用原生的npm速度慢，可以使用cnpm来替换
    # cnpm淘宝出的工具，下载的时候，去淘宝镜像下载，速度快
    npm install -g cnpm --registry=https://registry.npm.taobao.org  # 替换npm,后面的是指定淘宝镜像
    cnpm install -g @vue/cli  # 使用cnpm后安装速度就很快了
4.使用vue-cli创建项目
    # 为了之后查找方便可以先找个目录，然后在该目录下创建项目
    vue create vue项目名
    之后的可以按下图操作
    # vue ui 使用图形化界面

vue项目介绍

vue项目的运行

pycharm运行项目的两种方式
    1.在命令行中执行
        npm run serve
    2.使用pycharm的绿色箭头执行
        在pycharm的运行按钮边上的执行项目中添加npm项目，Scripts选项填写serve，然后Apply Ok 即可

vue项目目录

myfirstvue  # 项目名
    node_modules  # 存有非常多的第三方模块，以后把项目复制给别人时，这个文件夹删掉，但是项目的运行需要它，如果没有只需要执行 cnpm install ，就会根据package.json的依赖包安装好依赖
    public  # 文件夹
        favicon.ico  # 网站图标
        index.html  # spa单页面应用，以后整个vue项目都是用这一个html，但我们不用动
    src  # 文件夹，以后我们操作这里的
        assets  # 静态资源，以后我们前端常用的图片、js、css等都放在这里
        	logo.png  # 图片
        components  # 以后这里放组件
        	HelloWorld.vue  # 提供的展示组件
        router  # 安装了Router就有的，下面会有个index.js
        	index.js
        store  # 安装了Vuex就会有的,下面会有个index.js
        	index.js
        views  # 页面组件
            AboutView.vue
            HomeView.vue
        App.vue  # 根组件，new Vue实例管理了div，原来写在div中的东西现在都写在App.vue中
        main.js  # 项目的启动入口
    .gitignore  # git的忽略文件
    babel.config.js  # bable配置文件，不用管
    jsconfig.json  # 配置文件，不用动
    package.json  # 安装了第三方模块它会自动增加，不用管
    package-lock.json  # 锁定文件
    README.md  # 用户手册
    vue.config.js  # vue的配置文件

xx.vue组件文件内容

1.在xx.vue中就三部分内容
    1.专门写组件内的html内容
        <template>
        </template>
    2.专门写组件的样式
        <style>
        </style>
    3.专门写js代码
        <script>
        </script>
2.在main.js中学到的
    以后在App.vue中写
    new Vue({
        render: h => h(App)
    }).$mount('#app')

es6的导入导出语法

js从es6开始支持包的导入导出
默认导入导出
    导出语法
        export default  # 默认导出语法，只能导出一个，一般是导出一个对象
    导入语法
        import 别名 from '路径'  # 别名就是我们导出的对象
      
命名导入导出
    导出语法，可以导出多个
        export const name=name
        export const add=add
    导入语法  
        import {name, add} from './zyg/s1'  # 路径中的s1为s1.js，.js可以省略，如果导出多个变量名，但是只用到一个，那么就在大括号内只导入用到的变量名
        
导入的简写
    如果我们导入的是包下的index.js那么index.js可以省略，只写包
    

vue项目编写步骤

1.组件导出
    export default {
        name: 'HelloWorld',
        data() {
            return {
                xx: '姓名'
            }
        },
    }

2.在别的组件中导入注册
    import HelloWorld from '@/components/HelloWorld.vue'  # @指代的是src的路径
    # 注册
    export default {
        components: {
            HelloWorld
        }
    }

解决跨域

1 装模块
	pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

2 注册app
	'corsheaders'
3 中间件修改
	'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'
)

scoped

父组件的样式在子组件中也会生效，我们可以加入scoped让该样式只在当前组件中生效
<style scoped>
h1 {
  background-color: chartreuse;
}
</style>