Vue-cli项目搭建
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。它依赖nodejs解释器环境，这个解释器是基于谷歌v8引擎编写的，能过在操作系统上执行js代码（原本js只能运行在浏览器中）
Vue ClI的关键结构是组件，页面上的每个部分都是一个个组件，通过一定的方式结合在一起。采取的是单页面应用(spa)结构。
vue-cli创建项目开发，在项目中开发，最后上线，一定要编译--->纯粹的html，js，css
项目环境准备
nodejs及cnpm工具
-
安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ -
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org -
安装脚手架vue-cli
cnpm install -g @vue/cli -
清空缓存处理
npm cache clean --force -
安装完vue-cli就可以在控制台输入vue命令了
vue 具体指令名
项目创建
- 在当前目录创建vue项目
vue create 项目名 - 使用图形界面创建项目
vue ui
创建项目时，需要注意几点配置：
-
提前进入目标目录（选择创建目录）
-
选择自定义方式创建项目，选取Router, Vuex插件，取消
所有其他配置参考：
项目启动
利用命令行指令启动：（注意执行指令的路径应当在项目根路径下）
npm run serve
利用pycharm工具配置启动，配置后使用绿色三角启动键即可启动。
项目目录介绍
-
node_modules
第三方模块集成包，在将项目打包给别人时这个包要忽略，项目缺失的依赖文件、模块通过
cnpm install就可以通过package.json的配置安装好。 -
public
- favicon.ico -- 网站title的小图标
- index.html -- spa单页面应用，vue项目都用这个html（不要改动）
-
src
- assets 静态资源文件夹
- logo.png -- 一张图片
- xx.css -- css文件
- xxx.js -- js文件
- components 组件文件夹
- HelloWorld.vue 组件文件，以vue为后缀
- router 路由文件夹，依赖Router包
- index.js -- 类似于py包的
__init__.py
- index.js -- 类似于py包的
- store 状态存储文件夹，依赖Vuex包
- index.js
- views 页面组件文件夹
- AboutView.vue
- App.vue -- 根组件，通过new Vue创建的Vue实例
- main.js -- 项目启动入口
- assets 静态资源文件夹
-
package.json -- 不用动，安装了第三方模块，它自动增加
-
jsconfig.json -- js配置文件，不用动
-
babel.config.js -- bable配置文件，不用动
-
vue.config.js -- vue配置文件
项目基础使用
js代码导入导出(es6)
导入整个文件
import 导入名称 from '模块路径'
import App from './App.vue'
// 从App.vue中导入App（如果模块中没有设置导出语法，则整体导入）
导入导出文件部分变量
导入：import 名字 from '模块路径'|import {名字1，名字2} from '模块路径'
导出：export default 变量（一般是对象{}）|export const 变量 = 值
其中通过第二种方式导出可以多次导出，导入则可以选择性的导入。
<script>
import leethon from "@/components/leethon"
// @在vue项目中表示src文件夹
export default {
name: 'AboutView',
components: {
leethon // leethon是文件导出的obj对象，在这里直接注册成组件
}
}
</script>
vue后缀文件的用法
一个vue文件由三个部分组成。
<template>模板部分，在vue项目中会自动处理到组件对象的template属性中</template>
<script>js代码部分，在vue文件中一般用于导出组件对象</script>
<style scoped>css代码部分</style>
ps：style标签中添加scoped属性，会取消样式对子组件进行下放继承，即仅在此vue组件生效
示例：
<template>
<div>在vue文件中，template标签中的html代码会自动的填充到导出的对象中，
并以template的属性存在。</div>
<p>传入的自定义属性值：{{into}}</p>
</template>
<script>
// 在这里导出整体对象，别的文件选择导入时，一个变量名则对应这个对象
export default {
name: "leethon",
data() {
return {
name: "leethon",
exData: "传出的数据"
}
},
props:['into'] // 可以从父组件获取数据
}
</script>
<style scoped>
</style>
main.js-App.vue-HomeView.vue启动到组件渲染
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) // 让App实例Vue挂载渲染
}).$mount('#app') // 挂载div做总应用
App.vue
通过路由分发界面
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
HomeView.vue
书写模板、导出vue对象、导入vue对象并注册到组件中。
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
发送axios请求
axios请求时ajax的一种实现方式，我们需要往项目中先下载axios依赖包：
npm install axios -S
// -S指在当前项目环境内下载
在需要发送axios请求前，要将axios包的代码导入
import axios from 'axios'
某个文件导入axios后，就可以使用其发送请求了，如：
// 利用axios发送post请求，携带用户名和密码数据
axios.post("http://127.0.0.1:8000/api/user/login/", {
username: this.username,
password: this.password,
}).then(loginRes => {
// 回调函数检验是否拿到想要的数据
console.log(loginRes)
// jwt要求将token放入请求头中
axios.defaults.headers.common['Authorization'] = `jwt ${loginRes.data.token}`
})