脚手架
vue-cli
vue的开发环境
vue
(它的核心是依赖于webpack实现的)
vue
的模块化和组件化的开发环境
vue-cli + vue-dev-tool + vue-router + vuex
安装
全局安装,就会在全局有一个vue
的命令
npm install -g @vue/cli
创建项目
vue create [项目名字]
vue create katsuki-project
选择默认default选项(babel,eslint)
babel
:将编程语言转化为ES5格式,代码格式化。
eslint
:代码规范和错误检查工具,一认定有错就疯狂报错,一般都是入门到放弃,可关闭。
初次创建,若有安装全局的npm和yarn命令,会让你选择,然后在路径
C:/User/Administrator
生成一份.vuerc
的文件保存信息,若想切换使用的管理包,删除再创建项目即可重新配置。
使用 vue serve
和 vue build
命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:
这个命令在vue create [项目名字] 执行完毕后运行
npm install -g @vue/cli-service-global
运行项目
npm run serve
将目录中的package.json文件中serve改成start就能用下面命令运行项目
npm start
运行成功结果图
创建完成的项目目录
components 放.vue组件
assets 放静态资源文件,一般只放图片
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
这里用render不用template方式
用template就有上篇博文描述的npm方式导入vue问题
template方法交给package.json中vue-template-compiler后端实现
不需要前端处理,故默认import的vue文件是少了template方法的文件
new Vue({
// 把App组件挂载到#app的这个节点上
render: h => h(App),
}).$mount('#app')
//上下两种写法等价,上面是main.js中的代码
new Vue({
el : '#app'
render: h => h(App),
})
使用案例
根据上面目录操作
components
添加文件Xkatsuki.vue
<!-- 单文件组件 .vue -->
<!-- html -->
<template>
<header v-text="title"></header>
</template>
<!-- js -->
<script>
export default {
data() {
return {
title: "katsuki"
};
}
};
</script>
<!-- css scoped表示这里写的css只能在该组件生效-->
<style scoped>
header {
height: 50px;
line-height: 50px;
width: 100%;
text-align: center;
color: pink;
background-color: gray;
}
</style>
App.vue修改
<template>
<div id="app">
<Xkatsuki />
</div>
</template>
<script>
import Xheader from './components/Xkatsuki.vue'
export default {
name: 'app',
components: {
// 注册组件
// 引用组件,再注册,然后在template使用
Xkatsuki
}
}
</script>
<style>
/*style没带scoped,影响全局样式,也可以将app.css内容写到这里*/
/*这里采用导入mian.js方式*/
</style>
src文件夹下添加styles
文件夹,并添加app.css
app.css
* {
margin: 0;
padding: 0;
}
main.js修改
import Vue from 'vue';
import App from './App.vue';
import './styles/app.css';
// 样式,第三方库引入
// 微信样式 npm install weui --save
import 'weui';
// 引入ajax库 npm install axios --save
import axios from 'axios';
// 引入jQuery库 npm install jquery --save
import $ from 'jquery'
// 把库挂载到原型链,这样就可以全局使用
Vue.prototype.$axios = axios;
Vue.prototype.$ = $;
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
运行项目即可看到效果,页面就这样通过组件搭建完成。
axios配置
在import axios
的文件中(这里是main.js
文件)添加语句
main.js
// 引入qs模块 npm install qs --save
import qs from "qs";
//axios全局配置
//axios中为所有请求带上Token头,用于token登录验证
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//修改axios原本post请求的Content-Type,解决post请求问题
//详情参考Vue基础的axios的github链接
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//axios.create
var katsuki = axios.create({
baseURL: 'http://localhost:6666'
});
//默认全局url
axios.defaults.baseURL = 'https://localhost:7777';
//挂载原型链
Vue.prototype.$katsuki = katsuki;
Vue.prototype.$qs = qs;
------------------------------------
请求调用文件
使用axios发送请求时
this.$axios({
method: "post",
//使用this.$axios,实际url为http://localhost:7777/katsuki
url: "/katsuki",
//data使用到qs模块
data: this.$qs.stringify({
...
})
}).then((res)=>{
...
})
this.$katsuki({
method: "post",
//使用this.$katsuki,实际url为http://localhost:6666/katsuki
url: "/katsuki",
//data使用到qs模块
data: this.$qs.stringify({
...
})
}).then((res)=>{
...
})
build及上线
vue-cli中的package.json
的内容
"scripts": {
npm run serve 相当于自己搭建的webpack环境执行webpack-dev-serve运行服务器
"serve": "vue-cli-service serve",
npm run build 相当于执行webpack命令进行打包
"build": "vue-cli-service build"
}
npm run build
执行后会生成dist文件夹,会将原先的文件全部压缩成css和js
打开dist文件夹,打开里面的index.html
文件即可运行项目,生成如图
index.html
中引入文件的路径是绝对路径,dist
文件夹放到服务器的项目运行环境apache
、express-cli
的public
文件夹中等类似操作可正常运行,但要本地打开,就要改成相对路径,/
前加个点.
绝对路径
<link href=/css/app.c52c2a74.css rel=preload as=style>
相对路径
<link href=./css/app.c52c2a74.css rel=preload as=style>