开始使用Vue-基础篇

citgpt 2024-10-01 19:45 9 浏览 0 评论

脚手架vue-cli安装

创建Vue项目 vue-cli脚手架的安装使用.

使用如下命令安装脚手架。

开始使用Vue-基础篇

使用vue-cli客户端，直接创建vue工程。

>vue create mozi-todo-vue
'vue' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

输入命令找到npm的配置路径 npm config list

>npm config list
; "builtin" config from D:\Program Files\nodejs\node_modules\npm\npmrc

prefix = "C:\\Users\\AppData\\Roaming\\npm"

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

查看此路径下是否有vue.cmd
如果有此vue.cmd文件，将当前路径复制到path环境变量。
如果没有此vue.cmd文件，打开cmd, 输入命令npm install -g vue-cli, 会自动下载模板。

>npm install -g vue-cli
npm ERR! code ETIMEDOUT
npm ERR! syscall connect
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/vue-cli failed, reason: connect ETIMEDOUT 104.16.18.35:443
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:\Users\AppData\Local\npm-cache\_logs\2022-11-14T02_45_09_325Z-debug-0.log

有时命令npm install -g vue-cli 会出现ERR错误，用这个命令试试：

cnpm install -g @vue/cli

4.调整网络之后，再次安装

>npm install -g vue-cli
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

added 230 packages, and audited 231 packages in 2m

11 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (2 moderate, 2 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

5.若想重新安装，桌面下cmd执行cli的全局卸载

npm uninstall vue-cli -g;

开始创建vue项目

1、执行命令 vue create project-name, 结果提示如下

>vue create moz-vue

  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

下边提示很明显，让更新到vue cli 到3 版本。按照说明，执行上边两条命令。

>npm uninstall -g vue-cli

removed 230 packages, and audited 1 package in 1s

found 0 vulnerabilities

>npm install -g @vue/cli
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md

added 847 packages, and audited 848 packages in 1m

64 packages are looking for funding
  run `npm fund` for details

4 vulnerabilities (2 moderate, 2 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

此时，再次创建vue 项目

D:\vuews>vue create test-vue
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
?  Creating project in D:\vuews\test-vue.
  Initializing git repository...
??  Installing CLI plugins. This might take a while...


added 847 packages in 1m
  Invoking generators...
  Installing additional dependencies...


added 96 packages in 16s
?  Running completion hooks...

  Generating README.md...

  Successfully created project test-vue.
  Get started with the following commands:

 $ cd test-vue
 $ npm run serve

开始启动

cd test-vue
npm run serve

项目结构

如果前面的步骤都执行顺利的话，脚手架工具应该已经在你的项目中创建了一系列的文件和目录，我们接下来列举一些比较重要的：

.eslintrc.js: 这个是 eslint 的配置文件，可以通过它来管理你的校验规则。
babel.config.js: 这个是 Babel 的配置文件，可以在开发中使用 JavaScript 的新特性，并且将其转换为在生产环境中可以跨浏览器运行的旧语法代码。你也可以在这个里配置额外的 babel 插件。
.browserslistrc: 这个是 Browserslist 的配置文件，可以通过它来控制需要对哪些浏览器进行支持和优化。
public: 这个目录包含一些在 Webpack 编译过程中没有加工处理过的文件（有一个例外：index.html 会有一些处理）。favicon.ico: 这个是项目的图标，当前就是一个 Vue 的 logo。index.html: 这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。

备注：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。

src：这个是 Vue 应用的核心代码目录

main.js：这是应用的入口文件。目前它会初始化 Vue 应用并且制定将应用挂载到 index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
App.vue：这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
components：这是用来存放自定义组件的目录，目前里面会有一个示例组件。
assets：这个目录用来存放像 CSS、图片这种静态资源，但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。

备注：根据创建项目时候的一些配置项，可能会有一些其他的预设目录（例如，如果你选择了路由配置，会看到一个 views 的文件夹）。

.vue文件 (单文件组件)

就像很多其他的前端框架一样，组件是构建 Vue 应用中非常重要的一部分。组件可以把一个很大的应用程序拆分为独立创建和管理的不相关区块，然后彼此按需传递数据，这些小的代码块可以方便更容易的理解和测试。

在其他框架都鼓励把模板、逻辑和样式的代码区分成不同文件的时候，Vue 却反其道行之。使用单文件组件，Vue 把模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包工具（例如 Webpack）处理，这意味着你可以使用构建时工具。你可以使用比如 Babel、TypeScript、SCSS 等来创建更多复杂的组件。

另外，使用 Vue CLI 创建的项目被配置为在开箱即用的情况下借助 Webpack 使用 .vue文件。实际上，如果您查看我们使用 CLI 创建的项目中的 src 文件夹，您会看到第一个.vue 文件：App.vue。

现在我们来开始探讨。

APP.vue

打开 App.vue 文件，可以看到由 <template>、<script> 和 <style> 三部分组成，分别包含了组件的模板、脚本和样式相关的内容。所有的单文件组件都是这种类似的基本结构。

<template> 包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML，以及一些我们接下来要讲的 Vue 特定的语法。

对于 App.vue，我们的默认导出将组件的名称设置为 app ，并通过将 HelloWorld 组件添加到 components 属性中来注册它。以这种方式注册组件时，就是在本地注册。本地注册的组件只能在注册它们的组件内部使用，因此您需要将其导入并注册到使用它们的每个组件文件中。这对于拆包 / tree shaking（译者注：一种减小包体积优化方式）很有用，因为并不是应用程序中的每个页面都不一定需要每个组件。

组件的 CSS 应该写在 <style> 标签里，如果你添加了 scoped 属性（形如 <style scoped>），Vue 会把样式的范围限制到单文件组件的内容里。这个是类似于 CSS-in-JS 的解决方案，只不过允许书写纯粹的 CSS。

本地运行程序

Vue CLI 带有内置的开发服务器。这样一来，您就可以在本地运行您的应用程序，这样就可以轻松对其进行测试，而无需自己配置服务器。CLI 会以 npm 脚本的形式将 serve 命令添加到项目的 package.json 文件中，因此您可以轻松地运行它。

在您的终端中，尝试运行 npm run serve（或者如果希望使用 yarn，则运行 yarn serve ）。你的终端应输出类似以下内容

> test-vue@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 3501ms                                                                                                                                                                                               15:17:16


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.20.67.82:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

这个时候，通过浏览器打开地址，可打开此应用。

好了，先暂时写到这。

npm list