初识Vue及搭建一个Vue项目详细过程

发布于：2023-01-10 ⋅ 阅读:(2053) ⋅ 点赞:(2)

目录

一，什么是Vue 

1，Vue：MVVM模式的实现者

2，Vue.js的优点

二，如何搭建Vue项目

1，准备需要的环境

2， 安装

2.1，传统安装（2.x及更早）

2.2，流行安装（3.x）

三，Vue项目结构详解

四，踩坑总结

4.1，查看npm版本时，Error: EPERM: operation not permitted

4.2，cnpm安装其他东西时出现：TypeERROR：randomUUID is not a function。

4.3，vscode中使用cnpm或其他命令时，出现 无法加载文件 C:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。

一，什么是Vue 

Vue是一套用于构建用户界面的渐进式框架。发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底向上的逐层应用。Vue的核心只关注视图层，不仅易于上手，海边与与第三方库（例：vuex，vue-router）或既有项目整合。

1，Vue：MVVM模式的实现者

  • Model：模型层，在这里便是JavaScript对象

  • View：视图层，在这里表示DOM（HTML操作的元素）

  • ViewModel：连接数据和数据中间件，Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许试图和数据直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个观察者

  • ViewModel能够观察到数据的变化，并对试图对应的内容进行更新

  • ViewModel能够监听到试图的变化，并能够通知数据发生改变

因此，Vue.js可以理解为一个MVVM的是实现者，它的核心就是实现了DOM监听与数据绑定

2，Vue.js的优点

  • 轻量级，体积小。Vue.js压缩后只有20多kb(Angular压缩后56kb+，React压缩后44kb+)

  • 移动优先。更适合移动端

  • 易上手，学习曲线平稳，文档齐全

  • 吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有与自己独特的功能，如：计算属性

  • 开源，社区活跃度高

  • ……

二，如何搭建Vue项目

1，准备需要的环境

安装node.js点击下载，无脑安装在自己的环境目录下即可。

确认node.js安装成功：

  • cmd下输入node -v,查看是否能够正确打印出版本号即可
  • cmd下输入npm -v,查看能否正确打印出版本号即可

需要提高效率的可以安装Node.js淘宝镜像加速器（cnpm)

2， 安装

2.1，传统安装（2.x及更早）

2.1.1，全局安装vue-cli

npm install --global vue-cli

C:\Users\young>npm install --global vue-cli

2.1.2，进入自己的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack+ 项目名

D:\music_cloud>vue init webpack music_client

? Project name music_client
? Project description n
? Author young
? 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) no

   vue-cli · Generated "music_client".

# Project initialization finished!
# ========================

To get started:

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

Documentation can be found at https://vuejs-templates.github.io/webpack

说明：

　　　　Project name==>项目名称 ，自己填写；

              Project description==>项目描述，自己填写，可不写；

              Author==>作者名，~；

              Vue build ==> 打包方式，回车即可

              Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

安装成功后即可看到我们的目录的Vue基本模板搭建完成：

在当前文件下的目录下安装依赖：使用命令：npm install

D:\music_cloud\music_client>npm install

 等待依赖安装完成后即可启动项目：npm run dev

D:\music_cloud\music_client>npm run dev

如多中间出现警告，可按提示输入命令自行修复：

found 61 vulnerabilities (2 low, 47 moderate, 12 high)
  run `npm audit fix` to fix them, or `npm audit` for details

项目启动成功：

 然后就可以访问Vue的初始界面。至此，简单的的Vue项目搭建完成，界面可以在idea里打开项目后自行修改。

2.2，流行安装（3.x）

这些安装方式主要在于Vue 3出现后，更方便我们快捷搭建Vue项目。因此前提是需要我们安装最新的Vue脚手架。相比而言，传统的Vue-cli在Vue 3中变为了@vue/cli，由于npm安装速度慢，笔者更推荐使用淘宝镜像及其命令cnpm进行安装，因为cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用。npm版本需要大于3.0，如果低于该版本需要进行版本升级：

#查看版本

npm -v

#升级或安装cnpm

npm install -g cnpm

#升级npm

cnpm install -g npm

利用cnpm/npm全局安装@vue/cli

npm install -g @vue/cli（推荐）

或

yarn global add @vue/cli

此时就安装算了Vue-Cli3，但是需要注意的是，如果我们之前安装过vue-cli的需要进行卸载，而且在Vue-Cli3中是没有vue init 这个命令的，如果需要项传统方式那样构建项目，我们还需要安装一个cli-init的包，即可达到此目的。

#卸载vue-cli

npm uninstall vue-cli -g（推荐）

或

yarn global remove vue-cli

#安装init包

npm install -g @vue/cli-init（推荐）

或

yarn global add @vue/cli-init

2.2.1，vue init 创建项目，方式如传统方式一样。

2.2.2，Vite 创建项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。语法格式为：

cnpm（npm)  vite(@latest 可省略) <project-name>

然后我们就可以指定需要安装的框架了

D:\Vue>cnpm create vite vue_active
Need to install the following packages:
  create-vite@3.0.2
Ok to proceed? (y) y
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte

 最后根据安装提示很快就能构建一个vue项目了

√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in D:\Vue\vue_active...

Done. Now run:

  cd vue_active
  npm install
  npm run dev

启动后即可得到项目运行初始图：

 

 2.2.3，vue create 命令安装

vue create 命令创建项目语法格式如下：

vue create [options] <app-name>

创建一个由 vue-cli-service 提供支持的新项目：

options 选项可以是：

  • -p, --preset <presetName>： 忽略提示符并使用已保存的或远程的预设选项
  • -d, --default： 忽略提示符并使用默认预设选项
  • -i, --inlinePreset <json>： 忽略提示符并使用内联的 JSON 字符串预设选项
  • -m, --packageManager <command>： 在安装依赖时使用指定的 npm 客户端
  • -r, --registry <url>： 在安装依赖时使用指定的 npm registry
  • -g, --git [message]： 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  • -n, --no-git： 跳过 git 初始化
  • -f, --force： 覆写目标目录可能存在的配置
  • -c, --clone： 使用 git clone 获取远程预设选项
  • -x, --proxy： 使用指定的代理创建项目
  • -b, --bare： 创建项目时省略默认组件中的新手指导信息
  • -h, --help： 输出使用帮助信息

#安装vue_p2

vue create vue_p2

然后根据操作提示一步到位

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features


✨  Creating project in D:\Vue\vue_p2.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 849 packages in 33s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages in 6s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue_p2.
👉  Get started with the following commands:

 $ cd vue_p2
 $ npm run serve

按下回车键后就会进入安装，等候片刻即可完成安装。

安装完成后，我们进入项目目录：

cd vue_p2

甚至都不需要像之前一样npm install安装依赖，即可启动应用：

 2.2.4，vue ui构建vue项目

vue ui可以打开可视化创建工具，通过可视化创建工具，我们能方便清晰的看到vue构建过程，直接傻瓜式一步到位！

D:\Vue>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

执行上述命令后，在浏览器中输入ip跟端口号即可得到一个项目管理的界面。

我们可以点击"创建"选项来创建一个项目，选择底部"在此创建项目"，页面上方也可以选择路径：

在项目中输入自己的项目名，并配置相应的包管理器。 

 接着配置一些预设的配置

 配置完即可创建项目，接下来就可以等待安装完成。

 

三，Vue项目结构详解

   1、build：构建脚本目录

　　　　1）build.js   ==>  生产环境构建脚本；

　　　　2）check-versions.js   ==>  检查npm，node.js版本；

　　　　3）utils.js   ==>  构建相关工具方法；

　　　　4）vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀；

　　　　5）webpack.base.conf.js   ==>  webpack基本配置；

　　　　6）webpack.dev.conf.js   ==>  webpack开发环境配置；

　　　　7）webpack.prod.conf.js   ==>  webpack生产环境配置；

　2、config：项目配置

　　　　1）dev.env.js   ==>  开发环境变量；

　　　　2）index.js   ==>  项目配置文件；

　　　　3）prod.env.js   ==>  生产环境变量；

　3、node_modules：npm 加载的项目依赖模块

　4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

　　　　1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

　　　　2）components：组件目录，我们写的组件就放在这个目录里面；

　　　　3）router：前端路由，我们需要配置的路由路径写在index.js里面；

　　　　4）App.vue：根组件；

　　　　5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

四，踩坑总结

4.1，查看npm版本时，Error: EPERM: operation not permitted

即出现下列错误信息时：

Error: EPERM: operation not permitted,mkdir 'D:\Program Files \nodejs'TypeError: Cannot read property 'get’of undefined
at errorMessage (D:\0_app stay\node_modules\npm\lib\utils\error-message.js:38:39)at errorHandler (D:\0_app stay\node_modules\npm\lib\utils[error-handler.js:201:13)at D: \0_app stay\node_modules \npm\ bin\npm-cli.js :78:20
at cb D: \0_app stay\node_modules(npm\lib\npm. js :225:22)at D: \0_app stay \node_modules \npm\lib\npm. js :263:24
at D: \0_app stay\node_modules \npm\lib\config\core.js:81:7at Array.forEach (<anonymous>)
at D: \0_app stay\node_modules \npm\lib\config\core.js:80:13
at f (D:\0_app stay\node_modules\npm\node_modules\once\once.js:25:25)
at afterExtras (D: \0_app stay\node_modules\npm\lib\config\core.js:171:20)D: \0_app stay\node_modules\npm\lib\utils\error-handler. js:97
var doExit = npm.config.loaded ? npm.config.get('_exit') : true

此问题常出现在刚下载node，并且自己配置了环境变量以及global和cache文件时，导致文件权限不够。因此需要为用户users设置完全用户权限。

解决：找到node安装目录，右键属性，点击安全，设置users用户完全控制权限

4.2，cnpm安装其他东西时出现：TypeERROR：randomUUID is not a function。

这种错误出现的原因在于cnpm的版本与node不符，需要将node版本升级为当前版本号最新版本。在node版本升级过程中也兜兜转转踩了一下坑，比如安装n模块来升级node版本，但是n模块貌似并不持支windows。

C:\Users\young>npm install -g n
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@9.0.0: wanted {"os":"!win32"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  undefined
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Program Files (x86)\node\node_cache\_logs\2022-08-20T14_47_39_306Z-debug-0.log

 就算是采用npm install -g n --force强制安装也不能使用。因此最后采用就简单直接的方式：卸了重装，得以解决这个问题。后面如果有更好的解决办法，也欢迎大家积极留言~

4.3，vscode中使用cnpm或其他命令时，出现 无法加载文件 C:\Program       Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。

PS D:\Vue\vue_p2> cnpm install 
cnpm : 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies
。
所在位置 行:1 字符: 1
+ cnpm install --global vue-cli
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决：这种情况下需要更改执行策略。以管理员方式进入windows PowerShell

 然后在PowerShell中执行get-ExecutionPolicy，显示Restricted（表示状态是禁止的）。接着设置执行策略set-ExecutionPolicy RemoteSigned，选择Y，更改执行策略。即可解决该问题。重新执行自己需要的cnpm命令即可。

PS C:\WINDOWS\system32> set-ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布