前端学习vue2

东方狱兔

已于 2023-08-23 14:27:56 修改

阅读量151

点赞数

文章标签：学习

于 2023-08-04 14:42:38 首次发布

疯批美人东方陨

本文链接：https://blog.csdn.net/weixin_42498050/article/details/132104263

版权

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) // true

document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob

// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
</body>

</html>