【0523】vue学习笔记01

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

前言

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

一、安装node.js

1.环境准备

直接去往node.js官网下载即可（建议点击左侧下载16.15.0版本）

2.下载完成后解压即可

3.验证环境搭建成功

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

node -v

二、搭建Vue脚手架

1.配置淘宝镜像

终端输入如下指令

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

最后我的输出，

最后出现warning不用管，如果出现如下报错，就是前面所说的没有使用管理员身份打开终端，解决方法见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 'C:\Program Files\npm-cache\_cacache\index-v5\87\99\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269'
npm ERR!  [Error: EPERM: operation not permitted, open 'C:\Program Files\npm-cache\_cacache\index-v5\87\99\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Program Files\\npm-cache\\_cacache\\index-v5\\87\\99\\8595daf39d5f9028d772a4353f43f1c74061cb73d298171efcc71ac6d269',
npm ERR!   requiredBy: '.'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It'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下载依赖的位置

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

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 = "C:\\Users\\陈潇逸\\AppData\\Roaming\\npm" ; overridden by user

; "user" config from C:\Users\陈潇逸\.npmrc

cache = "C:\\Program Files\\npm-cache"
prefix = "C:\\Program Files\\npm-global"
registry = "https://registry.npm.taobao.org/"

; node bin location = C:\Program Files\nodejs\node.exe
; cwd = C:\Users\陈潇逸
; HOME = C:\Users\陈潇逸
; Run `npm config ls -l` to show all defaults.

4.安装vue-cli

npm install -g vue-cli

然后我的报错如下（若不产生报错直接看下一步）

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 'proxy' config is set properly.  See: 'npm help config'

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

解决方法一：

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

然后再尝试下载，输入

npm install -g vue-cli

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

解决方法二：
输入如下命令行，再次更改镜像源

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

然后，再次尝试下载

npm install -g vue-cli

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

三、vue项目启动及概述

1.使用vue搭建项目

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

cd C:\data_base\project

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

npm i -g @vue/cli-init

3.最后创建项目

vue init webpack project
//project可以修改为任意项目名字
//以下为选择
? Target directory exists. Continue? Yes
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? 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 `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "project".

最后输出成功如图

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

cd project
npm start

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

6.vue项目概述

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

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

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

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

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

​ +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,终于到此告一段落了，第一篇Writeup,主要参考了B站大佬学习并自己总结的，如有错误，请提出，后续可能会有进一步关于Vue的学习笔记更新（可能）……