python bottle部署g_python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(14)---前端页面搭建...

最新推荐文章于 2024-01-31 17:29:48 发布

weixin_39593427

最新推荐文章于 2024-01-31 17:29:48 发布

阅读量137

点赞数

文章标签： python bottle部署g

本文链接：https://blog.csdn.net/weixin_39593427/article/details/112889173

版权

本文介绍了使用Vue.js和Bottle框架构建知识付费平台的前端页面搭建过程，包括Vue.js的特点、前端环境的搭建、VUX组件库的使用以及webpack配置的调整。作者通过详细步骤展示了如何从零开始初始化项目，安装依赖，并最终成功运行项目，实现了组件的引入和使用。

摘要由CSDN通过智能技术生成

python web(bottle框架)知行合一之-简单知识付费平台-”全栈“实践(14)---前端页面搭建

PS：笔记只是为了更好表达我怎么语言表述，有些时候可能难免废话一推！

因知识有限, 如有错误, 欢迎指正！

每日细语：学海无涯苦作舟！

PS:后续前端相关代码我都是基于参考这个项目，感谢这位大神开源的这么牛B的参考项目：

https://github.com/SmallRuralDog/pay-schol

续言

前面一系列的小节。我们几乎都已经完成相关API接口的设计，当然这里API接口还没涉及到相关的RESTful api 接口风格。后续有时间的话，再继续往这方面去延伸记录一下相关的笔记。

既然现在我们的后端的接口都准备好了，那么我们就需要把后端的数据通过请求接口的方式请求回来，对数据进行可视化操作处理。

前端的使命其实就是对后端数据的展示及操作命令的提交处理。

关于前端

以下文字来源于官网的描述：

Vue.js 特点

简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

数据驱动：自动追踪依赖的模板表达式和计算属性。

组件化：用解耦、可复用的组件来构造界面。

轻量： ~24kb min+gzip，无依赖。

快速：精确有效的异步批量 DOM 更新。

模块友好：通过 NPM 或 Bower 安装，无缝融入你的工作流。

如果你喜欢下面这些，那你一定会喜欢 Vue.js：

可扩展的数据绑定机制

原生对象即模型

简洁明了的 API

组件化 UI 构建

多个轻量库搭配使用

因为本人也并非专业前端开发人员，自己也是纯粹业余时间学习一下相关VUE.JS的框架！发现这块框架是我所认知到开发前端比较容易接受及入门的。

如果说你非要说使用原生什么JQ那些来的话，说真的，我也不是很熟。

因为我更倾向于选择vue.js的渐进式的MVVM的模式。这样我们不需要对的香菇dom进行过多的操作，就可以随着数据变化，则UI就随之而变的效果。

前端环境的搭建(VUX)

PS：因为我们的项目立意在SPA，所以相关SEO暂时不考虑在此范围内！

1 前端页面的IDE工具准备

image.png

2 前端页面的使用VUE-CLI脚手架初始化项目框架

步骤

进行NODE.JS的安装

NODE.JS环境变量的配置

全局安装 vue-cli

$ npm install --global vue-cli

3 新建项目

image.png

3 使用脚手架初始化项目

PS D:\vue_pro\kownledpay> vue init webpack

image.png

? Project name y

? Project description 简单的知识付费

? Author 我只是习惯了沉默 <308711822@qq.com>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)

> Yes, use NPM

Yes, use Yarn

No, I will handle that myself

按下enter继续：

image.png

4 运行初始化好的项目

image.png

项目结构：

image.png

运行：

PS D:\vue_pro\kownledpay> npm run dev

image.png

1> 在项目里安装vux(必须)

image.png

npm install vux --save

2> 在项目里安装vux-loader(必须)

image.png

npm install vux-loader --save-dev

3 > 在项目里安装安装less-loader(必须)

(如果不安装想关闭路由请求可能会报错！)

image.png

npm install less less-loader --save-dev

4 > 查看package.js的文件：

{

"name": "y",

"version": "1.0.0",

"description": "简单的知识付费",

"author": "我只是习惯了沉默 <308711822@qq.com>",

"private": true,

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"

"dependencies": {

"vue": "^2.5.2",

"vue-router": "^3.0.1",

"vux": "^2.9.0"

"devDependencies": {

"autoprefixer": "^7.1.2",

"babel-core": "^6.22.1",

"babel-helper-vue-jsx-merge-props": "^2.0.3",

"babel-loader": "^7.1.1",

"babel-plugin-syntax-jsx": "^6.18.0",

"babel-plugin-transform-runtime": "^6.22.0",

"babel-plugin-transform-vue-jsx": "^3.5.0",

"babel-preset-env": "^1.3.2",

"babel-preset-stage-2": "^6.22.0",

"chalk": "^2.0.1",

"copy-webpack-plugin": "^4.0.1",

"css-loader": "^0.28.0",

"extract-text-webpack-plugin": "^3.0.0",

"file-loader": "^1.1.4",

"friendly-errors-webpack-plugin": "^1.6.1",

"html-webpack-plugin": "^2.30.1",

"less": "^3.0.2",

"less-loader": "^4.1.0",

"node-notifier": "^5.1.2",

"optimize-css-assets-webpack-plugin": "^3.2.0",

"ora": "^1.2.0",

"portfinder": "^1.0.13",

"postcss-import": "^11.0.0",

"postcss-loader": "^2.0.8",

"postcss-url": "^7.2.1",

"rimraf": "^2.6.0",

"semver": "^5.3.0",

"shelljs": "^0.7.6",

"uglifyjs-webpack-plugin": "^1.1.1",

"url-loader": "^0.5.8",

"vue-loader": "^13.3.0",

"vue-style-loader": "^3.0.1",

"vue-template-compiler": "^2.5.2",

"vux-loader": "^1.2.8",

"webpack": "^3.6.0",

"webpack-bundle-analyzer": "^2.9.0",

"webpack-dev-server": "^2.9.1",

"webpack-merge": "^4.1.0"

"engines": {

"node": ">= 6.0.0",

"npm": ">= 3.0.0"

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

]

}

5 > 修改webpack.base.conf.js 配置文件

image.png

原配置文件：

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {

return path.join(__dirname, '..', dir)

}

module.exports = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

]

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

修改之后的配置文件:

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

const vuxLoader = require('vux-loader')

function resolve(dir) {

return path.join(__dirname, '..', dir)

}

const webpackConfig = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

resolve: {

extensions: ['.js', '.vue', '.json', '.less'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

]

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

// module.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui']})

module.exports = vuxLoader.merge(webpackConfig, {

plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {

path: 'src/styles/theme.less'

}],

})

主要变化：

在前面添加：

const vuxLoader = require('vux-loader')

在末尾添加：

// module.exports = vuxLoader.merge(webpackConfig, {plugins: ['vux-ui']})

module.exports = vuxLoader.merge(webpackConfig, {

plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {

path: 'src/styles/theme.less'

}],

})

继续运行：

image.png

注释掉样式文件的加载

path: 'src/styles/theme.less'

，因为我们现在还没有用到。

修改语言支持，支持ES6

image.png

报错问题描述：

Module build failed: TypeError: Path must be a string. Received undefined

at assertPath (path.js:28:11)

at Object.join (path.js:499:7)

at Object.module.exports (D:\vue_pro\kownledpay\node_modules\vux-loader\src\index.js:83:28)

再次修改配置文件:

'use strict'

const path = require('path')

const utils = require('./utils')

const config = require('../config')

const vueLoaderConfig = require('./vue-loader.conf')

const vuxLoader = require('vux-loader')

function resolve (dir) {

return path.join(__dirname, '..', dir)

}

const webpackConfig = {

context: path.resolve(__dirname, '../'),

entry: {

app: './src/main.js'

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

}

]

node: {

// prevent webpack from injecting useless setImmediate polyfill because Vue

// source contains it (although only uses it if it's native).

setImmediate: false,

// prevent webpack from injecting mocks to Node native modules

// that does not make sense for the client

dgram: 'empty',

fs: 'empty',

net: 'empty',

tls: 'empty',

child_process: 'empty'

}

// const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {

plugins: ['vux-ui']

})

运行没问题。

按需引入组件测试

在main.js中引入对应的组件

image.png

修改HelloWorld.vue组件

image.png

查看页面效果，组件引入及使用成功！：

image.png

结束

以上笔记纯属个人学习实践总结，有兴趣的同学可以加群一起学习讨论QQ：308711822

weixin_39593427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python bottle部署g_python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(14)---前端页面搭建...

python web(bottle框架)知行合一之-简单知识付费平台-”全栈“实践(14)---前端页面搭建PS：笔记只是为了更好表达我怎么语言表述，有些时候可能难免废话一推！因知识有限, 如有错误, 欢迎指正！每日细语：学海无涯苦作舟！PS:后续前端相关代码我都是基于参考这个项目，感谢这位大神开源的这么牛B的参考项目：https://github.com/SmallRuralDog/pay-sc...
复制链接

扫一扫