【0523】vue学习笔记01

一、安装node.js
二、搭建vue脚手架
三、vue项目启动及概述

前言

本文基于Windows系统及Vscode环境下搭建vue脚手架&＃xff0c;初步入门进行vue相关知识的学习

一、安装node.js

1.环境准备

直接去往node.js官网下载即可&＃xff08;建议点击左侧下载16.15.0版本&＃xff09;

2.下载完成后解压即可

3.验证环境搭建成功

搜索命令提示符&＃xff0c;然后右键选择以管理员身份运行&＃xff0c;否则后续安装将无法继续进行
输入&＃xff08;这是我的命令返回显示&＃xff09;

node -v


二、搭建Vue脚手架

1.配置淘宝镜像

终端输入如下指令

npm i -g cnpm --registry&＃61;https://registry.npm.taobao.org


最后我的输出&＃xff0c;

最后出现warning不用管&＃xff0c;如果出现如下报错&＃xff0c;就是前面所说的没有使用管理员身份打开终端&＃xff0c;解决方法见1.3

npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\npm-cache\_cacache\index-v5\87\99\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open &＃39;C:\Program Files\npm-cache\_cacache\index-v5\87\99\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269&＃39;
npm ERR! [Error: EPERM: operation not permitted, open &＃39;C:\Program Files\npm-cache\_cacache\index-v5\87\99\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269&＃39;] {
npm ERR! errno: -4048,
npm ERR! code: &＃39;EPERM&＃39;,
npm ERR! syscall: &＃39;open&＃39;,
npm ERR! path: &＃39;C:\\Program Files\\npm-cache\\_cacache\\index-v5\\87\\99\\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269&＃39;,
npm ERR! requiredBy: &＃39;.&＃39;
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It&＃39;s possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:


2.配置npm下载依赖的位置

依次执行一下两条命令即可(注意不要含有中文目录&＃xff0c;否则会影响以后代码的正常运行&＃xff09;

npm config set cache "C:\Program Files\npm-cache"
npm config set cache "C:\Program Files\npm_global"


3.验证node.js环境配置

npm config ls
//输出如下
; "builtin" config from C:\Program Files\nodejs\node_modules\npm\npmrc; prefix &＃61; "C:\\Users\\陈潇逸\\AppData\\Roaming\\npm" ; overridden by user; "user" config from C:\Users\陈潇逸\.npmrccache &＃61; "C:\\Program Files\\npm-cache"
prefix &＃61; "C:\\Program Files\\npm-global"
registry &＃61; "https://registry.npm.taobao.org/"; node bin location &＃61; C:\Program Files\nodejs\node.exe
; cwd &＃61; C:\Users\陈潇逸
; HOME &＃61; C:\Users\陈潇逸
; Run &＃96;npm config ls -l&＃96; to show all defaults.


4.安装vue-cli

npm install -g vue-cli


然后我的报错如下&＃xff08;若不产生报错直接看下一步&＃xff09;

npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed, reason: getaddrinfo ENOTFOUND registry.cnpmjs.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network &＃39;proxy&＃39; config is set properly. See: &＃39;npm help config&＃39;npm ERR! A complete log of this run can be found in:
npm ERR! C:\Program Files\npm-cache\_logs\2022-05-23T13_16_49_363Z-debug-0.log


解决方法一&＃xff1a;

npm config get proxy
//返回为null则进行下一步
npm config get https-proxy
//返回为null则跳过下一步
//如果不为bull&＃xff0c;则进行这一步
npm config set proxy null
npm config set https-proxy null
//然后执行下一步&＃xff0c;更换镜像源
npm config set registry http://registry.cnpmjs.org/
npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org

然后再尝试下载&＃xff0c;输入

npm install -g vue-cli


如果此时返回如下图所示&＃xff0c;Congratulations!错误解决&＃xff0c;如果此方法不行&＃xff0c;不要急&＃xff0c;请看下一种

解决方法二&＃xff1a;
输入如下命令行&＃xff0c;再次更改镜像源

npm config set registry https://registry.npm.taobao.org


然后&＃xff0c;再次尝试下载

npm install -g vue-cli


这次总该下载成功了吧&＃xff0c;如果还没有成功&＃xff0c;不要着急&＃xff0c;肯定是电脑的问题不是你的问题啦&＃xff0c;首先把电脑关机&＃xff0c;让它去反省一会儿&＃xff0c;过一个晚上或者过一个下午再打开使用以上两种方法&＃xff0c;还不成功&＃xff0c;就换一个无线网或者接有线网尝试下载&＃xff0c;总之&＃xff0c;不是下载源的问题就是下载方式的问题&＃xff0c;或者就是电脑当时没转过来&＃xff0c;我就是因为这个报错卡了一两天的时间……

三、vue项目启动及概述

1.使用vue搭建项目

首先转到你准备存储代码的那个目录下

cd C:\data_base\project


2.然后还需要在全局下安装webpack

npm i -g &＃64;vue/cli-init


3.最后创建项目

vue init webpack project
//project可以修改为任意项目名字
//以下为选择
? Target directory exists. Continue? Yes
&＃39;git&＃39; &＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;ڲ&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;ⲿ&＃xfffd;&＃xfffd;&＃xfffd;Ҳ&＃xfffd;&＃xfffd;&＃xfffd;ǿ&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;еij&＃xfffd;&＃xfffd;&＃xfffd;
&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;&＃xfffd;ļ&＃xfffd;
? Project name test
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run &＃96;npm install&＃96; for you after the project has been created? (recommended) npmvue-cli · Generated "project".

最后输出成功如图

4.进而转到目录下运行项目

cd project
npm start


5.最后弹出框如图即为配置成功

6.vue项目概述

project --------------->项目名

-build --------------->用来使用webpack打包使用build依赖

-config --------------->用来做整个项目配置的目录

-node_modules--------->用来管理项目中使用依赖

-src --------------->用来书写vue源代码

​ &＃43;assets --------------->用来存放静态资源

​ components----------->用来书写vue组件

​ router -------------->用来配置项目中的路由

​ App.vue -------------->项目中的根组件

​ main.js -------------->项目中的主入口

-static -------------->其他静态

-.babelrc -------------->将es6语法转化为es5运行

-.editorconfig----------->项目编辑

-.gitignore -------------->git版本控制忽略文件

-.pdstcssrc.js------------>使用源码相关js

-index.html-------------->项目主页

-package.json----------->类似于项目中的pom.xml依赖管理 jquery 不建议手动修改

-package-lock.json---->对package.json的加锁

-README.md------------>项目的阅读文件

总结

OK,终于到此告一段落了&＃xff0c;第一篇Writeup,主要参考了B站大佬学习并自己总结的&＃xff0c;如有错误&＃xff0c;请提出&＃xff0c;后续可能会有进一步关于Vue的学习笔记更新&＃xff08;可能&＃xff09;……