Vue-cli脚手架搭建移动端响应式项目及nodejs服务端搭建教程
首先安装脚手架及创建基于webpack项目
首先下载vue相关
cnpm install vue 安装 vue-cli脚手架
全局安装 vue-cli $ cnpm install –global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 如果有提示,默认回车即可 进入项目,安装并运行:
cd my-project cnpm install cnpm run dev 脚手架启动成功后输入localhost:8080即可出现如下
集成scss语法
首先什么事scss及为什么用scss
scss是css预编译处理语言,是专门为css设计的,它的优势在于开发效率高。对于一些样式复杂的站点,比手写 CSS 快得多,设计思想是面向对象话,结合es6语法,效果很好。关于语法学习这里就不说了。 下载关于scss的相关包喎? f/ware/vc/"="" target="_blank" class="keylink">vcD4NCjxwPm5wbSBpbnN0YWxsIHNhc3MtbG9hZGVyIG5vZGUtc2FzcyAmbmRhc2g7c2F2ZS1kZXYgz+7Ev7yvs8k8L3A+DQo8cD7P7sS/1tDV0rW9IGJ1aWxkzsS8/rzQz8LD5rXEd2VicGFjay5iYXNlLmNvbmYuanPOxLz+zO2808jnz8K0+sLrv+k8L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;"> { test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }
在样式中添加 lang=”scss”既可以使用scss语法
集成px2rem-loader来达到响应式布局
下载 px2rem-loader
npm i install px2rem-loader –save-dev vue中配置 在build下的 utils.js中,找到generateLoaders 方法
//先添加对象 var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 41.4//设计稿宽度,也就是设计手机的屏幕宽度 } }; // 找到这个对象,在加载数组里面添加px2remLoader 来确定加载到 function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader ] : [cssLoader,px2remLoader ] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
这样就会自动帮我们把对应的px转换成rem
- 下载安装lib-flexible
- npm i lib-flexible –save-dev
- 在项目入口文件main.js中引入lib-flexible
- import ‘lib-flexible/flexible.js’
上面所述,移动端响应式布局项目就搭建完毕了。
设置代理来实现前后端分离的混合开发
找到–condig–index.js文件
proxyTable: { "/api":{ target:"https://localhost:3000/",//需要跳转的服务器地址 changeOrigin:true, pathRewrite:{ '^/api':'/' //浏览器会根据读取的带有api开头的进行重写 } } }
这样就可以访问后端人员提供的接口进行前后端交互了
扩展关于axios的使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
1、安装axios
npm install axios –save-dev
2、配置
首先,找到vue脚手架入口 main.js处进行组件引入
import axios from ‘axios’
然后以原型链的形势挂载到Vue对象中并进行使用如下:
Vue.prototype.$axios = axios
基于Express服务端的nodejs项目搭建
1.下载express框架的生成命令(只需要执行一次)
npm install express-generator -g
2.生成开发项目文件夹(一个项目执行一次)
express node-project -e
-e:利用ejs模块引擎
3.进入node-project文件夹,并且执行npm install
下载node-project文件夹下package.json文件中dependencies中的所有依赖的模块
4.启动项目,并在浏览器中访问项目 https://localhost:3000
npm start
5.修改package.json
“scripts”: {
“start”: “supervisor ./bin/www” // 每次修改及时生效
}
6.修改模板引擎的后缀名
app.js中第15行改为下列两行代码,将ejs文件替换为html
app.engine(‘html’, require(‘ejs’).__express);
app.set(‘view engine’, ‘html’);
修改views目录下的文件后缀名为html
这样基于Express框架的nodejs项目基本搭建完成。
喎?>上一篇: HTTP请求封装以及代理请求详解