（一）vue.js开发环境搭建、安装stylus，以及一些小技巧，--save和--save-dev的区别，axios发送ajax请求（静态数据处理），移动端的配置，旅游网站
vue.js的vue-cli的理解：
vue-cli是Vue的脚手架工具，帮我们写好vue.js基础代码的工具，搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。
vue.js开发环境搭建
1、安装node.js，下载地址，安装好之后需要配置node.js系统环境变量，这里要保证node.js的版本是4版本以上
2、安装全局vue-cli脚手架，用于帮助搭建所需的模板框架
首先：在cmd里面输入：npm install -g vue-cli，回车
然后：在cmd里面输入vue，出现vue信息说明安装成功，如下图所示
3、创建项目
在cmd里面输入：vue init webpack sell(项目文件夹名)，等待一会会出现'git'的项，可按下图操作
4、安装依赖（进入相应的盘符路径，在执行下面的操作）
首先，在cmd里面输入：cd sell(项目)，回车
然后，在cmd里面输入：npm install，回车。
这时候需要等待一会，安装成功会出现下面的图片信息：
回到项目目录下，会发现多了node_modules文件夹（里面的内容就是之前安装的依赖）
5、测试环境是否搭建成功
首先，在cmd里面输入: npm run dev
然后会出现下面的图，表示成功：
然后，在浏览器地址栏里面输入地址：localhost://8080
出现下面的图，表示环境搭建成功
6、vue实现ajax获取后台数据是通过vue-resource这个插件的，那么就需要在这个项目下安装这个插件
1) 在项目中引入该插件：在cmd下进入项目的根目录，然后输入“npm install vue-resource --save”
2）在main.js中引入该插件：import VueResource from 'vue-resoucre ；Vue.use(VueResource)
经过以上两步就可以使用vue-resource插件中的API了
新版本的vue在使用vue-cli搭建项目的框架的时候，在build文件夹下已经没有dev-server.js文件，这是因为在新版本的vue下，已经将dev-server.js和webpack.dev.conf.js进行合并了，如果需要写路由相关配置，需要在build文件夹下的webpack.dev.conf.js文件中找到devServer对象对相关属性进行配置。
下面是webpack.dev.conf.js文件的内容：
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const appData = require('../data.json');
const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
before(app){
app.get('/api/seller',function (req,res) { //通过路由获取数据都要通过api这个组件去获取
res.json({
errno:0,
data:seller
});
});
app.get('/api/goods',function(req,res){
res.json({
errno:0,
data:goods
});
});
app.get('/api/ratings',function(req,res){
res.json({
errno:0,
data:ratings
});
});
},
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
利用vue的脚手架vue-cli将项目配置好之后，如果做的 是移动端项目，需要在项目的根目录下的index.html的
页面宽度为移动端视口宽度，最小最大的页面大小为视口的大小，不能缩放
不同浏览器的默认css不一样，需要reset.css设置同样的css
1）在src/assets文件夹下新建文件夹styles,在建一个reset.css文件
2）将 https://meyerweb.com/eric/tools/css/reset/index.html 该内容粘贴在reset.css中
3）将reset.css引进项目中：在src/main.js文件的头部添加如下代码
import './assets/styles.reset.css'当页面中的样式有所改变的时候，证明该文件引入成功
移动端用1px问
在vue中使用css预处理器stylus:
cnpm install --save stylus
cnpm install --save stylus-loader在vue的组件中使用stylus语法书写css
//scoped使得当前组件的样式只对该组件生效，不会影响到别的组件
移动端的布局，一般使用rem,rem的计算是相对于根元素html中设置的font-size的大小进行计算的
html{
font-size:50px
}
如果p的width是43px，那么有
p{
width:.86rem
}
(43 * 2)/(50*2)=0.86rem,这就是设置html的font-size为50px的原因，便于计算在组件中使用icon-font
1）在https://www.iconfont.cn官网上将要下载的图标添加进购物车，然后添加进项目，然后下载到本地，将字体库和.css文件复制到项目中的文件中，在main.js中将.css文件引进来
2）在组件中，直接使用该类，内容为其16进制代码
在webpack.base.conf.js中设置解析规则，使得引进变量的路径变得简短些
如下面：
可以将路径写成：
@import '~styles/varibles.styl'使用stylus中的变量-----背景色在很多页面共用同一个值，设置变量，便于管理项目，如果项目风格改变，易于管理，只需要改变一个地方即可
1）首先，在src/assets/styles下创建文件varibles.styl
2）在上述文件中添加内容，如上图所示
3）在组件中使用该变量
这样就可以了
在实际的项目当中，每添加一个新的功能就会创建一个新的分支，当代码完成之后会将代码合并到主分支上
安装时--save和--save-dev的区别
在package.json中有两个属性，dependencies和devDependencies
dependencies-表示运行时、发布到生产环境时还需要依赖的插件，--save表示下载的模块会安装到dependencies
devDependencies表示开发、打包时需要的插件，--save-dev下载的模块会安装到devDependencies
npm install '模块名'-----将模块下载到node_modules中
详解 https://blog.csdn.net/cc18868876837/article/details/81109664
在vue 中创建轮播图，使用插件vue-awesome-swiper
1）在项目中安装Vue-awesome-swiper，由于最新版有问题，可以在安装的时候指定版本安装
cnpm install [email protected] --save2）在main.js中将vue-awsome-swiper引进来，并通过Vue.use(VueAwesomeSwiper)使用该插件，如下图所示
3）在组件中使用轮播图
在使用轮播图时，存在抖动问题，解决方法：链接 https://blog.csdn.net/tangxiujiang/article/details/88872444
4）设置轮播图中的分页符：设置属性swiperOption中的pagination
修改分页符的背景色---->>>样式穿透，样式不受scoped的限制
修改轮播图组件中的样式：使用>>>来改变
页面图标的拖动，即轮播图，每页显示8个，当多于9-16个之后显示在第二页，以此类推
1）如下所示，是在同一张slider中显示，超过8个图标的部分会被隐藏掉，2）中会利用计算属性设置两页显示的效果
2）利用computed计算分页页数，实现两页显示----将数据分别用不同的数组存储在计算属性pages中
3）在
使用stylus中mixins功能------对于一些css样式，可能会多处用到，此时可以在src/assets/styles文件夹下建立一个mixins.styl文件
1）内容如下：
2）在组件的