vue-cli创建项目，es6导入导出语法，跨域问题终极解决，scoped 样式当前组件生效
目录
vue-cli创建项目
需要提前配置好nodejs环境，vue-cli是一个工具，使用nodejs编写，如果想要运行就必须要node环境。
浏览器默认只能识别js,html,css 语言
vue-cli 创建出的vue项目，并把xx.vue ,ts,等等编译成 html, js ,css。
创建vue项目
创建的时候根据自己使用的vue版本选择对应的版本. vue3可以使用vite创建项目。速度更快
官方文档: https://cli.vuejs.org/zh/
1,首先装好nodejs环境
2.安装vue-cli
npm install -g @vue/cli
因npm下载的时候是国外的资源比较慢，可以使用cnpm来替代
下载cnpm 替换npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm去装vue-cli
cnpm install -g @vue/cli+
使用vue-cli创建项目
项目名
vue create myfirstvue
创建的时候注意路径
上图，空格选中/取消。回车确定
等待，如果安装过慢的话可以Ctrl+c结束，然后执行下面语句清空缓存
npm cache clean --force
图形化界面创建项目
vue ui
会启动一个服务，监听一个端口。打开后会发现是一个界面，在里面可以创建项目。
python运行项目
使用python直接打开我们创建的项目文件夹。
1，命令行中执行
npm run serve
2,点击项目绿色运行按钮
vue项目目录介绍
myfirstvue # 项目名
node_modules # 存放的很多第三方包，模块，项目复制给别人这个也要复制过去，不然很多依赖模块的项目没有它不行。
"如果没有只需要执行 cnpm install，根据package.json的依赖包，按装好依赖"
public # 文件夹
-favicon.ico # 网址的小图标
-index.html # spa(单页面应用)，以后整个vue项目都是用使用这一个html，不需要动他。
src # 文件夹，我们操作的
assets # 静态资源文件夹，前端用的图片都放在这里
-logo.png # 图片
components # 存放组件的文件夹xx.vue
-HelloWorld.vue # 组件
router # 创建项目的时候安装了Router就有这个文件夹
-index.js
store # 创建项目的时候安装了Vuex就会有这个文件夹
-index.js
views # 页面组件
-AboutView.vue
-HomeView.vue
App.vue # 根组件，我们原来写的new Vue实例管理了el: div，原来写在div里的东西现在都写在这
main.js # 项目的启动入口
.gitignore # git的忽略文件
babel.config.js # bable配置文件
jsconfig.json # js 配置文件
package.json # 第三方包，自动增加
package-lock.json # 锁定文件
README.md # 用户手册
vue.config.js # vue的配置文件
es6导入导出语法
通过观察App.vue , main.js , About.vue 的写法 以后我们在开发vue项目都按照这个模式来。
.vue 格式的文件就三块内容
#1 以后组件的html内容，都写在这里
<template>
</template>
#2 以后该组件使用的样式css，都写在这
<style>
</style>
# 3 以后js的东西，都写在这
<script>
</script>
.js 文件
就是找到index.html 文件内的id为app的div标签，以后div的内容都在App.vue里写
new Vue({
render: h => h(App)
}).$mount('#app')
导入导出的语法
js 从es6语法开始也支持像python那样导包。
# 导入语法
import 别名 from '路径'
eg:
import lxj from './lxj/s1'
console.log(lxj.name)
console.log(lxj.add(1,3))
"别名就是导出的对象"
# 导出语法
export default 一般是个对象
eg:
var name = '胡歌'
function add(a,b){
return a+b
}
# 如果内部变量和函数想要给外部使用需要导出
export default {name:name,add:add} # 通过对象的方式导出可以使用.name
命名导出导入
# 导出语法 可以导出多个
export const name='胡歌'
export const add = (a, b) => {
console.log(name)
return a + b
}
导入语法
import {name, add} from './lxj/s1'
console.log(name)
console.log(add(33, 44))
导入的简写方法
包下的 index.js 导入的时候，不用写到index.js的路径
# 包是
lxj
-index.js
#导入的时候
import lqz from './lqz'
import lxj from './lxj'
console.log(lxj.name)
console.log(lxj.add(33, 44))
var name = '胡歌'
function add(a,b){
return a+b
}
export default {name:name,add:add}
Vue项目编写步骤
以后只用编写.vue 组件
- 页面组件
- 小组件
小组件中导出
export default {
name: 'HelloWorld',
data() {
return {
name: '胡歌'
}
},
}
在页面组件中导入注册
// import HelloWorld from '@/components/HelloWorld.vue' // 绝对导入
import HelloWorld from '../components/HelloWorld.vue' // 相对导入
export default {
name: 'HomeView',
components: {
HelloWorld // 注册局部组件
}
}
注册完以后
<HelloWorld msg="传过去的 哈哈哈"></HelloWorld>
解决跨域终极版
1 装模块
pip3.8 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'
)
登录案例
下载axios模块
cnpm install axios -S # 带着-S会自动把当前依赖加入到package.json中
导入模块
import axios from 'axios'
代码
<template>
<div class="about">
<h1>登录功能</h1>
<p><input type="text" v-model="username"></p>
<p><input type="password" v-model="password"></p>
<button @click="click">登录</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'AboutView',
data() {
return {
username: '',
password: '',
}
},
methods: {
click() {
axios.post('http://127.0.0.1:8001/login/', {username: this.username, password: this.password}).then(res => {
console.log(res)
})
}
}
}
</script>
scoped 样式当前组件生效
我们在给父组件设置样式的时候，会影响到子组件相同的标签，可以使用scoped设置只在当前组件生效
<template>
<div id="app">
<h1>首页</h1>
<router-view/>
</div>
</template>
<style scoped>
h1{
background: crimson;
}
</style>
