初学者 Vue 安装学习

Tian Never Settle

已于 2022-07-01 14:37:09 修改

阅读量770

点赞数 1

文章标签： vue.js 前端 javascript

于 2019-08-18 19:09:04 首次发布

本文链接：https://blog.csdn.net/a12hhhe/article/details/99705879

版权

参考网上内容，边学习边把一些知识记录下来希望自己能够记忆深刻，有更加深刻的理解。

什么是Vuejs

Vue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

什么是nodejs

是一个前端框架，一个基于 Chrome V8 引擎的 JavaScript 运行环境，一个让 JavaScript 运行在服务端的开发平台

什么是npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

什么是webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

一、用webStorm创建Vue项目：

1、常规创建项目的方法，选择Vue项目创建即可：

如下图所示则表示创建项目成功

新创建的项目，目录结构如下图所示：

2、运行（注意：不一定是 npm run dev 哦）

打开项目目录下的 package.json 文件，

如上图所示，scripts对象下只有serve，build，lint 没有 dev

所以运行时在控制台输入 npm run serve 运行

或者，如下图双击 npm 下的serve 即可运行。

若你的项目根目录下没有build，和config文件夹，你可以在控制台输入命令 vue init webpack，然后就和脚手创建Vue项目是一样的了，一步一步创建好项目之后，运行项目要用 npm run dev 命令哦。

如果遇到报错：webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

请转到：Vue项目运行报错，‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。_a12hhhe的博客-CSDN博客

二、脚手架创建Vue项目：

1. 首先需要安装node.js，安装完nodejs之后npm也会自动安装。查看是否安装了node.js，可通过命令行输入 node -v 查看。

安装之后输入 node -v 和 npm -v 如下说明安装成功：

2. 安装淘宝镜像

（因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以我们乐于分享的淘宝团队干了这事）

命令行输入  npm install cnpm -g  （此命令为升级或安装 cnpm）

如果安装失败的话试试下面的这条命令

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

安装成功之后命令行输入 cnpm -v，出现如下部分说明安装成功

3. 安装 webpack 命令行输入 npm install webpack -g，如果出现错误用命令 npm install webpack-cli -g 全局安装试一下

安装成之后命令行输入 webpack -v ，出现版本号说明安装成功，我的出现了如下情况说是用npm install -D安装，我选择了yes，

安装成功

4. 安装vue-cli脚手架构建工具

命令行下输入 npm install webpack -g，

此处我选择了菜鸟教程上的全局安装 vue-cli，命令行输入 cnpm install --global vue-cli

命令行输入 vue -V （-V的V是大写）出现版本号说明安装成功

5.构建项目

通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目

接下来创建一个基于 webpack 模板的新项目
命令行输入：vue init webpack my-vue  (my-vue是项目名称，可任意)

敲下回车

接着我就按照提示操作，cd my-vue npm run dev 启动项目

在网页输入http://localhost:34254，显示如下界面，OK

我的第一个项目my-vue 默认创建在了从 C盘下：C:\Users\Administrator

用webstrom打开项目

如果webstrom是启动着的，则关闭重启后用打开项目。

在终端输入 npm run dev 启动项目

succeed！

webstrom的目录结构

刚开始进入页面默认的时HelloWord.vue 页面，可在router下的index.js中设置一开始要进入的页面

详情参考：vue设置一开始进入的页面_大海无量的博客-CSDN博客_vue设置默认打开页面

扩展：

安装镜像时以下报错，解决方法见网站：解决 cnpm : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。_y_0232的博客-CSDN博客

解决方法:
1.
以管理员身份运行power shell
2.
输入set-ExecutionPolicy RemoteSigned
然后输入A 回车

npm install cnpm -g
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\nodejs\node_cache\_cacache\tmp\aa520e7f
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\aa520e7f'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\aa520e7f'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\aa520e7f'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\aa520e7f'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   stack: "Error: EPERM: operation not permitted, open 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\aa520e7f'",
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\aa520e7f'
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 install 报错：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ruoyi@3.8.2
npm ERR! Found: webpack@5.73.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from html-webpack-plugin@4.5.2
npm ERR!   node_modules/html-webpack-plugin
npm ERR!     peer html-webpack-plugin@"^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5
npm ERR!     node_modules/script-ext-html-webpack-plugin
npm ERR!       dev script-ext-html-webpack-plugin@"2.1.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5
npm ERR! node_modules/script-ext-html-webpack-plugin
npm ERR!   dev script-ext-html-webpack-plugin@"2.1.5" 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 D:\Program Files\nodejs\node_cache\eresolve-report.txt for a full report.

因为npm 版本过高
解决办法：

1. 降低npm 版本

2. 执行一下代码

npm i --legacy-peer-deps

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

参考有：（感谢以下大佬）

菜鸟教程：Vue.js 安装 | 菜鸟教程

基于Idea从零搭建一个最简单的vue项目 https://www.jianshu.com/p/9c1d4f8ed068

Vue2.0史上最全入坑教程（上） Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli） - 简书

如何使用NPM？CNPM又是什么？ https://www.jianshu.com/p/f581cf9360a2

Vue的安装及快速入门 Vue的安装及使用快速入门

Tian Never Settle

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学者 Vue 安装学习

参考网上内容，边学习边把一些知识记录下来希望自己能够记忆深刻，有更加深刻的理解、什么是VuejsVue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。什么是nodejs是一个前端框架，一个基于 Chrome V8 引擎的JavaScript运行环境，一个......
复制链接

扫一扫