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>
4.专门写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>