Vue学习

一、安装vue-cli

下载地址： 下载 | Node.js 中文网 安装的时候一直下一步直到结束

确认是否安装成功：

• 在cmd中运行node -v命令，查看是否能够输出版本号

• 在cmd中运行npm -v命令，查看是否能够输出版本号

node -v

npm -v

安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g //-g 全局安装

安装vue-cli -g

cnpm install vue-cli -g

vue list

二、创建vue-cli项目：

vue 基于 ES6 ，现在还有很多网站es5

我们一般基于webpack模块创建vue项目

1、vue init webpack myvue

一路no即可

C:\WINDOWS\system32>cd c:\java\vue
​
c:\java\vue>vue init webpack myvue
​
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name myvue
? Project description A Vue.js project
? Author lxyandyou
? Vue build standalone
? Install vue-router? No
? 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) no
​
   vue-cli · Generated "myvue".
​
# Project initialization finished!
# ========================
​
To get started:
​
  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev
​
Documentation can be found at https://vuejs-templates.github.io/webpack

2 、cd myvue

npm install (or if using yarn: yarn) npm run dev

3、问题处理

处理问题

vue-cli 安装错误处理

问题：造成如下错误npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

原因：Npm版本8.3.1 太高

c:\java\vue\myvuetest>npm -v
8.3.1

现象

c:\java\vue\myvuetest>npm audit fix
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myvuetest@1.0.0
npm ERR! Found: webpack@5.69.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.69.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^2.2.0" from extract-text-webpack-plugin@2.1.0
npm ERR! node_modules/extract-text-webpack-plugin
npm ERR!   dev extract-text-webpack-plugin@"^2.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\lxy\AppData\Local\npm-cache\eresolve-report.txt for a full report.
​
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lxy\AppData\Local\npm-cache\_logs\2022-02-16T07_31_25_388Z-debug-0.log
​
​

处理方法：

1、npm降低版本

执行命令：npm install npm@6.14.10 -g

2、删除创建的项目，重新创建

c:\java\vue>vue init webpack myvue

c:\java\vue>vue init webpack myvue
​
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name myvue
? Project description A Vue.js project
? Author lxyandyou
? Vue build standalone
? Install vue-router? No
? 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) no
​
   vue-cli · Generated "myvue".
​
# Project initialization finished!
# ========================
​
To get started:
​
  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev
​
Documentation can be found at https://vuejs-templates.github.io/webpack

3、cd myvue

npm install

如果出现问题： npm audit fix

4、启动项目 npm run dev

c:\java\vue\myvue>npm run dev
​
> myvue@1.0.0 dev c:\java\vue\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
​
(node:10028) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 13% building modules 27/29 modules 2 active ...index=0!c:\java\vue\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting
​
 DONE  Compiled successfully in 2808ms                                                                          15:39:02
​
 I  Your application is running here: http://localhost:8080
​