Vue_cli

脚手架

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

<!-- 单文件组件 .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>