首先安装脚手架及创建基于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的相关包<喎�"/kf/ware/vc/" target="_blank">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:"",//需要跳转的服务器地址

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.启动项目,并在浏览器中访问项目

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