分类 默认分类 下的文章

解决 webpack-dev-server 不能使用 IP 访问

webpack 是众所周知很好用的打包工具，在开发 vue 项目时，vue-cli 就集成了 webpack。
我们启一个服务：npm run dev
然后在浏览器可是使用 http://localhost:8080 访问，但是当我们遇到移动端项目时，需要在手机端访问，所以要把 localhost 换成本地 IP 地址，例如：http://192.168.x.xx:8080，你会发现移动端无法使用 IP 访问。
解决方案

第一种方法：
找到 your-project/build/webpack.dev.conf.js

// const HOST = process.env.HOST
const HOST = '192.168.x.xx:8080'

然后保存，重新启动一下服务，会发现 PC 地址栏已经变成：
http://192.168.x.xx:8080 了，然后手机试一试，没问题。

第二种方法：
找到 your-project/package.json

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

在这句话里面添加参数 --host 0,0,0,0

"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"

然后在 PC 地址栏输入：http://192.168.x.xx:8080 or localhost or 0.0.0.0 都可以访问，手机使用 IP 访问也是没问题。

官网下载页面https://nodejs.org/en/download/ 选在对应系统下载地址,复制下载地址使用wget 进行下载

创建安装目录 我直接在/usr/local/src目录下进行，下面做软链接时会用到这个目录

# wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz

# xz -d node-v12.18.3-linux-x64.tar.xz

# tar -xvf node-v12.18.3-linux-x64.tar

cd node-v12.18.3-linux-x64/bin/

执行命令查看 node 版本

# ./node -v

v12.18.3
我的node 放在 /usr/local/src 目录下

ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npm /usr/bin/npm
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npx /usr/bin/npx

如果之前装了nodejs 可以使用which node查看node之前的执行目录 把软连接改到这个地址

# node -v

显示版本号v12.18.3 表示完成

下面装一个cpm
npm安装安装插件比较慢，最好安装cnpm（淘宝NPM镜像）：

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

输入cnpm -v 提示结果为：cnpm: command not found，因为应为此时cnpm还是不是全局变量

输入命令：ln -s /node/node-v10.14.1-linux-x64/bin/cnpm /usr/bin/node（根据自己的node目录进行配置）， 此时cnpm就是全局变量了，就可使 cnpm -v 就可以查看版本号了

cnpm install -g vue-cli

安装完后程序会输出你的安装目录 根据自己的node目录进行配置

ln -s /node/node-v10.14.1-linux-x64/bin/vue /usr/bin/vue

测试是否可用

vue -V

创建一个项目
使用命令行进行初始化。

vue create antd-demo

使用组件

 npm i --save ant-design-vue

完整引入

import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

局部导入组件

import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'

Vue.config.productionTip = false

/* v1.1.2 */
Vue.component(Button.name, Button)
Vue.component(Button.Group.name, Button.Group)

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button)

Vue.prototype.$message = message

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入。

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. 报错
原因：vue-cli版本是3以下的，却用了3的命令
解决办法：更新版本
先卸载原来的

cnpm uninstall -g vue-cli

然后下载一个新的

cnpm install -g @vue/cli

安装vue-antd-admin 引用basic分支基础模块
(如果要研究项目的话直接git clone -b basic https://gitee.com/iczer/vue-antd-admin)

git clone -b basic https://gitee.com/iczer/vue-antd-admin

$ npm install

注意用的是用npm run dev 去package.json中看有没有dev信息

$ npm run serve

安装相关依赖

npm install jquery
npm install jsdom

引入方式

const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
const window = document.defaultView;
const $ = require('jquery')(window);
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. ...
  8. 9