搭建项目
首先确保安装了 webpack 、webpack-cli 和 npm install -g vue-cli
E:\Kenny\GitHub\webpack-vue> webpack -v
4.42.1
E:\Kenny\GitHub\webpack-vue> webpack-cli -v
3.3.11
E:\Kenny\GitHub\webpack-vue> vue --version
2.9.6
PS E:\Kenny\GitHub> vue init webpack webpack-vue
? Target directory exists. Continue? Yes
? Project name webpack-vue
? Project description A Vue.js project
? Author kenny-tang <kenny-tang@hotmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "webpack-vue".
# Installing project dependencies ...
一直以通过之前的学习已经理解vue的基本应用，接下来想要学习一下vue 的UI框架，这里我准备学习vuetify。
但是发现了一个很蛋疼的问题，找到的教程基本上都是按照webpack打包的方式进行开发的。用webpack 搞起来试试，本來想采用脚本直接引入的方式，想了想还是是用模块话的方式进行处理吧，可能这条路过程比较艰辛。
之前一直在和前端同事学习一些东西，发现他们现在使用的好多习惯，是不能对现有系统进行优化的，他们只开发单页面应用，而单页面不能很好的与现有的系统进行结合，所以这里我需要把项目改造成多页面、多入口项目。
主要参考了这两篇文章
基于Vue单页面开发进行多页面应用调整
vue如何将单页面改造成多页面应用
调整完之后发布目录如下形式:
将文件都发布到一个目录下便于发布代码
编写第一个自定义页面 routerRulePre.html、routerRulePre.vue、routerRulePre.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webpack-vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div>
{{hello}}
</div>
</template>
<script>
export default {
data () {
return {
hello: 'hello vue .'
}
}
}
</script>
import Vue from 'vue'
import RouterRulePre from './routerRulePre.vue'
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(RouterRulePre)
})
访问一下，可以看到页面输出了 hello vue. 说明配置成功了。
集成vuetify
安装vuetify
npm install vuetify
安装依赖
npm install sass sass-loader fibers deepmerge -D
安装时报如下异常
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
为什么会需要Python呢?
node-sass 编译器是通过 C++ 实现的。
在 Node.js 中，采用 gyp 构建工具进行构建 C++ 代码，而 GYP 是基于 Python 2 开发的，所以需要 python，而且不支持 3。
当然，要编译 C++ 还需要一个 C++ 编译器，类似 gcc，不同操作系统下需要的环境也不同，参考官网说明。
所以如果你之前没有配置过 node-gyp 构建环境，只装上 python2 还是不行的。
解决办法
1、安装windows-build-tools
npm install --global --production windows-build-tools
2、安装node-gyp
npm install --global node-gyp
注意以上两条命令需要在管理员的权限下运行，我的系统是 Win10 ，搜索cmd 然后右键以管理员身份运行，然后执行命令即可。
执行完后可以看到，下载并安装了以下的文件
为 Vuetify 创建一个包含以下内容的插件文件，src/plugins/vuetify.js：
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
修改 JS 入口文件，引入 Vuetify
import Vue from 'vue'
import RouterRulePre from './routerRulePre.vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export
/* eslint-disable no-new */
new Vue({
vuetify,
el: '#app',
render: h => h(RouterRulePre)
})
修改 .vue 模板文件，添加 vuetify 测试控件
<template>
<v-app id="inspire">
<v-container fluid.boolean=true style="padding-left: 15px;">
<v-row align="center">
<v-col align="center">
<v-btn color="primary">新 增</v-btn>
<v-btn color="primary">查 询</v-btn>
<v-btn color="primary">新 增</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<script>
export default {
data () {
return {
hello: 'hello vue .'
}
}
}
</script>
执行 npm run dev 查看页面，成功被vuetify的组件渲染了三个按钮
参考文章
npm安装某些模块为什么需要python？
Vuetify 快速开始
Can’t find Python executable “python”, you can set the PYTHON env variable.解决办法
963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
