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的相关包
  
  • npm install sass-loader node-sass –save-dev
• 项目集成
  项目中找到 build文件夹下面的webpack.base.conf.js文件添加如下代码块

{
          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:"http://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.启动项目,并在浏览器中访问项目 http://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项目基本搭建完成。