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项目基本搭建完成。

喎?>