欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue-cli脚手架搭建移动端响应式项目及nodejs服务端搭建教程

程序员文章站 2022-09-19 18:37:31
首先安装脚手架及创建基于webpack项目 首先下载vue相关 cnpm install vue 安装 vue-cli脚手架 全局安装 vue-cli $ cnpm inst...

首先安装脚手架及创建基于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即可出现如下

Vue-cli脚手架搭建移动端响应式项目及nodejs服务端搭建教程

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

喎?>