1. 安装node
brew install nodejs
(base) qa@yueyutu:~$node -v
v18.16.1
(base) qa@yueyutu:~$npm -v
9.5.1
2. 安装vue2报错
51 error code ETIMEDOUT
52 error syscall connect
53 error errno ETIMEDOUT
54 error network request to https://registry.npm.taobao.org/cnpm failed, reason: connect ETIMEDOUT 172.16.10.7:80
55 error network This is a problem related to network connectivity.
55 error network In most cases you are behind a proxy or have bad network settings.
55 error network
55 error network If you are behind a proxy, please make sure that the
55 error network 'proxy' config is set properly. See: 'npm help config'
56 verbose exit 1
57 timing npm Completed in 298294ms
58 verbose unfinished npm timer reify 1692155960383
59 verbose unfinished npm timer reify:loadTrees 1692155960390
60 verbose code 1
61 error A complete log of this run can be found in:
61 error /Users/qa/.npm/_logs/2023-08-16T03_19_20_239Z-debug-0.log
Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
解决办法
npm config set proxy false
npm cache verify
设置淘宝镜像源
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看镜像源
npm config get registry
这是因为coffee-script@1.12.7已经移动到coffeeScript,解决办法
npm install --global coffeescript
再次安装vue2
npm install vue-cli -g
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR!
npm ERR! To permanently fix this problem, please run:
npm ERR! sudo chown -R 501:20 "/Users/qa/.npm"
执行:sudo chown -R 501:20 "/Users/qa/.npm"
3. 全局安装vue-cli
# 安装vue2.X
注意安装时需要使用 sudo npm install -g vue-cli
命令,使用其他命令可能会报权限错误的问题。
sudo npm install vue-cli -g
# 安装vue3.X
npm install -g @vue/cli
4. 卸载node 18版本错误(上述问题无法解决,重新卸载安装18)解决了一天总结的经验:重新安装
1. 使用 Homebrew 卸载 Node.js
brew uninstall node
清理 npm 缓存的命令
npm cache clean --force
5. 最新版 node 【官网最新】
1. brew install node.js
2. 查看版本信息
node -v
3. 配置全局变量【重要】
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
source ~/.zshrc
4. 获取nodejs模块安装目录访问权限
(base) qa@yueyutu:~$which node
/usr/local/bin/node
sudo chmod -R 777 /usr/local/bin/node
5. 配置淘宝镜像【国内加速访问与下载插件等,前端开发环境必备】
安装淘宝镜像:
npm install -g npm --registry=https://registry.npm.taobao.org
修改路径
首先修改npm/cnpm 的全局安装路径 必须修改
查看路径【默认的安装,⬇️并不是标准的全局路径】
npm root -g
修改为标准的全局安装路径:
npm config set prefix /usr/local
6. 安装Vue2配置环境webpack
1. 安装vue2版本
sudo npm install -g vue-cli
查看版本信息
vue -V
2. 配置webpack环境
执行命令
sudo npm install webpack --save-dev
sudo npm install webpack-cli --save-dev
安装webpack-dev-server
sudo npm install webpack-dev-server@2.9.1
如果以上提示安装过了想重新安装 那么加 --force
查看版本信息
webpack -v
注意如遇到 zsh: command not found: 请移步特殊情况处理⬇️
3. 查看版本信息,提示未安装【解决方式】
选择no,接着执行安装命令
sudo npm install webpack-cli -g
打开变量添加
vim .bash_profile
在弹出的编辑器中增加配置
export PATH=~/.npm-global/bin:${PATH}
更新配置
source .bash_profile
完美解决!
7. 创建vue项目--舍弃
1. 一定要用sudo设置镜像源
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save
2.创建项目
vue init webpack stu
3. 在终端进入项目文件夹
cd stu
npm run dev
启动后,会有本地url地址和一个网络地址,在自己电脑上打开http://localhost:8080/即可见到效果,第二个网络地址供同局域网内的其他人访问
8. 升级vuecli2到vuecli3
vue下创建项目的时候发现报错了 vue create is a Vue CIL3 only command and you are using Vue CIL 2.9.6 You may want to run the following to upgrade to Vue CLI 3:
vue cli的版本低了。vue cli和vue的版本之间没有关系,vue cli可以用最新的
卸载Vue版本升级到新版本
sudo npm uninstall vue-cli -g
或者 sudo npm install -g @vue/cli --force
vue -V
@vue/cli 5.0.8
9. 创建vue2项目
vue create vuels
选择Y Manually select features
空格勾选
◉ Babel
◉ Router
◉ Vuex
◉ CSS Pre-processors
enter 2.0 Y
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS
Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated
config files
点击Y 回车
cd vuels
npm run dev
在浏浏览器访问http://localhost:8080/
10. vue2的项目结构
11. vue学习我的第一个vue
在/Users/qa/Desktop/devcloud/vuels/src/views创建vue文件
<template>
<div class="about">
<h1>我的第一个vue</h1>
</div>
</template>
在router下面 新增配置文件import导入代码路径(以router路径为当前目录)新增path
12. 新建其他vue项目
$vue create stuvue
$ cd stuvue
$ npm run serve
http://localhost:8081/testcc#/
13. created是页面创建后触发
created() {
console.log(this.random)
}
直接
console.log('datasite==',this.data.site),
console.log('dataurl==',this.data.url)
打印的日志要按开发者模式 控制台展示
created是页面创建后触发,这里不会触发页面创建后的操作 对象里面的用create,this指向,create不能每次都这么写
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head><body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000 }
var vm = new Vue({
el: '#vue_det',
data: data,
created() {
console.log('siteurl==', this.site)
}
})
console.log('datasite==', this.data.site)
console.log('dataurl==', this.data.url)
// 它们引用相同的对象!
document.write(vm.site === data.site) // truedocument.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
</body></html>
14. adb 命令不起作用 识别不了设备
adb devices不生效
重启adb服务
adb kill-server
adb start-server
100. 参考资料
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
npm install指令安装东西时报network错误解决方案_this is a problem related to network connectivity._码界猿候的博客-CSDN博客
macOS系统vue2.0配置前端开发环境_mac配置vue2环境_陈汉铭的博客-CSDN博客
mac创建vue项目_woooooh--的博客-CSDN博客
前端开发:颜色代码速查表【英文颜色、HEX(十六进制)格式、RGB格式、十进制】_前端颜色代码_陈汉铭的博客-CSDN博客