脚手架

vue-cli文档

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

<template><header v-text="title">header>
template>

<script>
export default {data() {return {title: "katsuki"};}
};
script>

<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 = falsenew 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/katsukiurl: "/katsuki",//data使用到qs模块data: this.$qs.stringify({ ...})
}).then((res)=>{...
})this.$katsuki({method: "post",//使用this.$katsuki，实际url为http://localhost:6666/katsukiurl: "/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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！