vue环境搭建(view:5791)

补全组件，运行
cnpm install
cnpm run dev

安装cnpm
$ npm install -g cnpm –registry=https://registry.npm.taobao.org
$ cnpm install [name]

安装webpack
cnpm install webpack -g (一个短横线)
cnpm install –save (两个短横线)
–save作用为将操作写入package.json (两个短横线)

安装git
git bash
tortoisegit

code123123

vue-cli构建vue项目
1.Node.js安装
node -v 和 npm -v显示版本
2.安装vue-cli
npm install vue-cli
(下一步如果提示vue不是内部命令，改为全局安装，npm install –global vue-cli)
3.使用vue-cli初始化项目（webpack为模板名称）
vue init webpack Vue-Project
模板:webpack-simple
4、进到目录
cd my-project
5、安装依赖
npm install
6、开始运行
npm run dev
7、测试项目–访问
localhost:8080
8、打包上线
npm run build(打包完成代码位于dist文件夹下)

打包部署的路径处理

假设项目部署在根目录下的app文件夹下
config/index.js

build: {
  assetsPublicPath: '/app/'
}

src/router/index.js

export default new Router({
  base:'/app/'
})

axios设置请求前缀

axios.defaults.baseURL = '/app/api/'

注意事项：css里引用图片都写相对路径
页面刷新后找不到页面：启用hash路由，或者配置服务器，将404重定向到index.html，
参考：https://segmentfault.com/q/1010000010173113

后记
公司win10系统安装没问题，在自己电脑的win7下各种出问题
问题一：node卸载掉，然后在命令行输入node命令竟然还在生效，意识到系统安装了多个node环境,搜索发现appcan里竟然也有nodejs卸载之，确保系统没有了node，然后重新安装
问题二：此时遇到第二个问题，项目文件夹是在D盘，公司win10下没问题，自己电脑上却老是出错，尝试在C盘的node目录下建立项目，顺利安装vue-cli

其他命令
npm update -g element-ui
npm init -f //快速初始化
npm cache clean –force //解决npm安装时候的各种报错

本地手机测试
config/index.js
host: ‘localhost’ 修改为 host: ‘0.0.0.0’
这个配置的含义是，你既可以再本地用http://localhost/yoursite的url访问项目，也可以用http://yourip/yoursite访问项目。
比如你的计算机IP地址是192.168.1.10，项目名称是app，那么你的访问url就可以是http://localhost/app，或者http://192.168.1.10/app。
这样设置的好处是，当你想用非本机访问项目进行测试时，由ip地址构建的url可以对项目进行访问，同时本地还可以用localhost进行访问。
如果你将ip写死了，那么localhost就无法访问了。

关闭严格语法检查
build/webpack.base.conf.js
createLintingRule内的规则注释掉

nodejs所有版本下载
https://nodejs.org/en/download/releases/

命令行务必以管理员身份运行

错误处理
1.Missing write access to
解决方案
删除本地node_modules文件夹，之后再次npm install即可恢复

注意事项
安装组件时候，提示组件和项目名称一样，找到package.json修改项目的name即可

奇怪问题的排查
参考的代码运行正常，移植到本地后就出问题。
查看package-lock.json中模块的实际版本，有时候高的版本反而会报错，所以可以锁定版本号

axios拦截器中无法捕获的错误的处理
then前面写catch这样可以捕获到所有错误

axios(options)
  .catch(err => console.error(err))
  .then()
  .catch(err => console.error(err))

lodash节流和防抖

methods:{
  // 节流：连续三次鼠标点击，第一次立即执行，第二次丢弃，第三次等待3秒后执行
  handleBtn1:_.throttle(()=>{
    console.log('btn1')
  },3000),
  // 防抖：第一次丢弃，第二次丢弃，第三次等待3秒后执行
  handleBtn2:_.debounce(()=>{
    console.log('btn2')
  },3000),
}

备注：如果将throttle/debounce的方法写在函数中，那么不会执行
throttle（节流）函数，在 wait 秒内最多执行 func 一次的函数。
debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。
options.trailing参数指定调用的时机，延迟开始前/延迟结束后。

vue3

npm create vue@latest
cd vue-project
npm install 
npm run format
npm run dev

nodejs版本低于16会报错，需要安装nvm切换不同node版本
下载地址：https://github.com/coreybutler/nvm-windows/releases

# 修改 nvm 下载地址：
# 安装完成后，打开安装目录下的setting.txt文件，修改指定位置
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

# 查看网络可以安装的 node 版本
nvm list available

# 显示所有安装的node.js版本，当前使用的版本前会带*号
nvm ls                      

# 安装 指定版本 (16.5.0)
nvm install 16.5.0

# 使用 指定版本
nvm use 16.5.0

# 卸载 指定版本
nvm uninstall 16.5.0