vue脚手架

vue脚手架和一些零碎的包安装和配置

vue脚手架安装步骤 ：

1、安装vue-cli （如果电脑上已经安装过全局的第一步可以省略）

cnpm install vue-cli -g

2、初始化脚手架

vue init webpack app(项目名)

查看 npm start

配置首选项里的 setting.json文件

{
    "files.autoSave": "afterDelay",
    "open-in-browser.default": "Google Chrome",
    "window.zoomLevel": 0,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "editor.fontSize": 20,
    "editor.tabSize": 2,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]
}

工程名下的config下的index.js中将autoOpenBrowser: false改为true
运行时自动打开浏览器

最后 npm start运行

解决跨域问题
1、装包；

npm install cors -d

2、导入；

const cors = require('cors');

3、

app.use(cors());

封装 axios ;

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:3000/api/'		// 默认导出的地址；

export function getSliders () {
  return axios.get('getSliders')
}

rem 的包；
1、安装包

npm install lib-flexible --save

2、导入库 // 在main 里面导入；

import 'lib-flexible'

3、在安装转换的包；

npm install postcss-px2rem-exclude --save-dev

4、配置内容
找到 .postcssrc.js 文件 在里面添加

"postcss-px2rem-exclude": {
      remUnit: 75,		// 750的 设计稿    window.devicePoxelRatio  像素比
      exclude: /node_modules/
    }

nodejs脚手架

首先电脑上要装nodejs

在安装express

mkdir myapp					新建一个myapp  目录
npm init					通过 npm init 初始化命令为你的应用创建一个 package.json 文件
cnpm install express --save

正常安装：
通过应用生成器工具 express-generator 可以快速创建一个应用的骨架。
1、express-generator 包含了 express 命令行工具。通过如下命令即可安装：

$ npm install express-generator -g

2、如下命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建，并且设置为使用 Pug 模板引擎（view engine）：

$ express --view=pug myapp

3、然后安装所有依赖包切换到对应的目录：

$ cd myapp
$ npm install

快速安装
1、express init server (init 是个名字)

express					安装到当前目录
express init server 			安装到指定目录

2、进入这个文件夹， cnpm install 安装依赖

cd init			切换目录
cnpm install		安装依赖

nodeJS代码提示工具

npm install -g @types/node			全局安装
cnpm install --save-dev @types/node			局部安装

安装supervisor 编辑完保存代码自动更新(刷新)

cnpm -g install supervisor

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

解决跨域问题

1、装包；

npm install cors -d

2、导入到主文件中 ；

const cors = require('cors');
app.use(cors());

封装 axios ;

1、下载axios

cnpm install axios --save

2、封装成一个函数

import axios from 'axios'			导入axios
axios.defaults.baseURL = 'http://127.0.0.1:3000/api/'		 默认导出的地址；
axios.interceptors.response.use(function (response) {		  数据拦截，加上它直接返回data 中的数据
	return response.data
}, function (error) {				失败返回的错误信息
	return Promise.reject(error)
})
export function getitem (url) {				调用的函数名
  return axios.get(url)				url 请求的数据地址，通过参数传过来
}

转换rem 的包；

1、安装包

npm install lib-flexible --save

2、导入库 // 在main 里面导入；

import 'lib-flexible'

3、在安装转换的包；

npm install postcss-px2rem-exclude --save-dev

4、配置内容找到 ‘ .postcssrc.js 文件 在里面添加 ’

"postcss-px2rem-exclude": {
    remUnit: 75,		   // 750的 设计稿    window.devicePoxelRatio  像素比
    exclude: /node_modules/
 }

vue下载轮播；可参考GitHub上的vue-awesome-swiper

1、下载包；

npm install vue-awesome-swiper --save

2、在全局里导入，main函数里导入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)