投稿
  1. 极客之音首页
  2. 后端漫谈

Vue 3 快速上手

seven_ • • 后端漫谈 • 阅读 333

导读：本篇文章讲解 Vue 3 快速上手，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

Vue 3 快速上手

官网：

Vue 3
https://cn.vuejs.org/
在这里插入图片描述
node.js
http://www.nodejs.com.cn/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

配置环境变量和nodejs

node vue开发环境搭建&前端问题解决&添加功能页面

node vue 开发环境搭建

第二天的时候，vue create xxx.xxx.xxx(项目名)失败！

在这里插入图片描述

原因是因为配置的环境变量失效了，需要重新配置：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

前端项目问题解决

在这里插入图片描述

在这里插入图片描述

Microsoft Windows [版本 10.0.22000.978]
(c) Microsoft Corporation。保留所有权利。

D:\Program Files\nodejs>npm config set prefix "D:\Program Files\node_global"

D:\Program Files\nodejs>
D:\Program Files\nodejs>npm config set cache "D:\Program Files\node_cache"

D:\Program Files\nodejs>npm get prefix
D:\Program Files\node_global

D:\Program Files\nodejs>npm get cache
D:\Program Files\node_cache

D:\Program Files\nodejs>node -v
v14.19.1

D:\Program Files\nodejs>vue -v
'vue' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

D:\Program Files\nodejs>npm config set prefix "D:\Program Files\node_global"

D:\Program Files\nodejs>npm config set cache "D:\Program Files\node_cache"

D:\Program Files\nodejs>npm config set registry=http://registry.npm.taobao.org

D:\Program Files\nodejs>npm install webpack@3.6.0 -g
npm WARN deprecated acorn-dynamic-import@2.0.2: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
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 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
D:\Program Files\node_global\webpack -> D:\Program Files\node_global\node_modules\webpack\bin\webpack.js

> es5-ext@0.10.62 postinstall D:\Program Files\node_global\node_modules\webpack\node_modules\es5-ext
>  node -e "try{require('./_postinstall')}catch(e){}" || exit 0


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\Program Files\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack\node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@3.6.0
added 367 packages from 291 contributors in 38.482s

D:\Program Files\nodejs>npm install webpack-dev-server@2.9.1 -g
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
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 urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated uuid@2.0.3: 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.
D:\Program Files\node_global\webpack-dev-server -> D:\Program Files\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpack-dev-server@2.9.1 requires a peer of webpack@^2.2.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@1.12.2 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

+ webpack-dev-server@2.9.1
added 425 packages from 232 contributors in 46.155s

D:\Program Files\nodejs>cnpm install -g @vue/cli@4.1.1
'cnpm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

D:\Program Files\nodejs>npm install -g @vue/cli@4.1.1
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
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 subscriptions-transport-ws@0.9.19: 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
npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
[            ......] / refresh-package-json:@babel/helper-explode-assignable-expression: sill refresh-package-json D:\Pr[            ......] \ refresh-packagD:\Program Files\node_global\vue -> D:\Program Files\node_global\node_modules\@vue\cli\bin\vue.js

> core-js-pure@3.25.3 postinstall D:\Program Files\node_global\node_modules\@vue\cli\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> @apollo/protobufjs@1.2.2 postinstall D:\Program Files\node_global\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall


> ejs@2.7.4 postinstall D:\Program Files\node_global\node_modules\@vue\cli\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

+ @vue/cli@4.1.1
added 889 packages from 561 contributors in 138.381s

D:\Program Files\nodejs>vue -V
@vue/cli 4.1.1

D:\Program Files\nodejs>

在这里插入图片描述

第二天修改环境配置之后：（纠正之后）

在这里插入图片描述
在这里插入图片描述

Microsoft Windows [版本 10.0.22000.978]
(c) Microsoft Corporation。保留所有权利。

D:\java-Vue-space\0927_Vue_KQC>vue create web_front_0926


Vue CLI v4.1.1
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.1.1 → 5.0.8   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v4.1.1
✨  Creating project in D:\java-Vue-space\0927_Vue_KQC\web_front_0926.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> core-js@3.25.3 postinstall D:\java-Vue-space\0927_Vue_KQC\web_front_0926\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\java-Vue-space\0927_Vue_KQC\web_front_0926\node_modules\ejs
> node ./postinstall.js

added 1259 packages from 631 contributors in 202.472s

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

🚀  Invoking generators...
📦  Installing additional dependencies...

added 11 packages from 40 contributors in 10.326s

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

⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd web_front_0926
 $ npm run serve


D:\java-Vue-space\0927_Vue_KQC>cd web_front_0926

D:\java-Vue-space\0927_Vue_KQC\web_front_0926>npm run serve

> web_front_0926@0.1.0 serve D:\java-Vue-space\0927_Vue_KQC\web_front_0926
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3498ms                                                                          09:14:19


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.31.110:8081/

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



 WAIT  Compiling...                                                                                             09:21:53

98% after emitting CopyPlugin

 DONE  Compiled successfully in 186ms                                                                           09:21:53


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.31.110:8081/

概念/思想：

在这里插入图片描述

创建项目：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
选择项目特征：上下键—>控制 空格—>选中
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

cmd代码如下:

在这里插入图片描述

Microsoft Windows [版本 10.0.22000.978]
(c) Microsoft Corporation。保留所有权利。

D:\java-Vue-space\0926_Vue3_KTLX\test_0926>vue create web_front_0926


Vue CLI v4.1.1
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.1.1 → 5.0.8   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
? Check the features needed for your project: Babel, Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v4.1.1
✨  Creating project in D:\java-Vue-space\0926_Vue3_KTLX\test_0926\web_front_0926.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> core-js@3.25.3 postinstall D:\java-Vue-space\0926_Vue3_KTLX\test_0926\web_front_0926\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\java-Vue-space\0926_Vue3_KTLX\test_0926\web_front_0926\node_modules\ejs
> node ./postinstall.js

added 1259 packages from 631 contributors in 182.805s

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

🚀  Invoking generators...
📦  Installing additional dependencies...

added 11 packages from 40 contributors in 10.541s

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

⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd web_front_0926
 $ npm run serve


D:\java-Vue-space\0926_Vue3_KTLX\test_0926>cd web_front_0926

D:\java-Vue-space\0926_Vue3_KTLX\test_0926\web_front_0926>npm run serve

> web_front_0926@0.1.0 serve D:\java-Vue-space\0926_Vue3_KTLX\test_0926\web_front_0926
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 10375ms                                                                         17:38:46

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

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

项目创建完成之后，查看parkage.json文件中的信息：
在这里插入图片描述

运行项目：

在这里插入图片描述

将项目拖到vscode中打开进行编辑：

在这里插入图片描述
在这里插入图片描述

纠正

在这里插入图片描述
因项目文件夹下存在node_modules文件夹，与web_fromt_0926中的node_modules文件重名。如果拖拽整个项目，在终端上npm install axios 加载axios时，将加载失败(不能加载到对应的位置)！

纠正后的项目整体布局：

在这里插入图片描述

对项目目录中的文件进行介绍：

在这里插入图片描述

在这里插入图片描述

代码提示&语法高亮插件

两款VSCode中好用的vue代码提示插件
https://www.yisu.com/zixun/326599.html
在这里插入图片描述
这里安装的是Vue 2 Snippets:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在vue脚手架项目中添加自己的功能页面:

在这里插入图片描述

Book.vue:

在这里插入图片描述

<template>
    <div>
        <h1>这是我的图书管理系统</h1>
        <p @click="show">{{info}}</p>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                info:"这是一本书"
            }
        },
        methods:{
            show(){
                alert(123);
            }
        }
    }
</script>

<!--scoped:表示改样式是一个局部样式，只在当前组件内有效-->
<style scoped>
div{
    background-color: red;
}
</style>

Book.vue(补充：引入axios)

在这里插入图片描述

<template>
    <div>
        <h1>这是我的图书管理系统</h1>
        <p @click="show">{{info}}</p>
        <ul>
            <li v-for="(b,index) in books" :key="index">
                {{b.bookId}}---{{b.bookName}}
            </li>
        </ul>
    </div>
</template>

<script>
//导入模块
import axios from 'axios'


    export default{
        data(){
            return{
                info:"这是一本书",
                books:[]
            }
        },
        methods:{
            show(){
                alert(123);
            },
            list(){
                //通过axios请求后台获取图书数据
                axios.get("http://localhost:xxx").then(()=>{
                    this.books=resp.data.data;
                });
            }
        },
        created(){ //vue创建完成之后，执行查询方法
            this.list();
        }
    }
</script>

<!--scoped:表示改样式是一个局部样式，只在当前组件内有效-->
<style scoped>
div{
    background-color: red;
}
</style>

App.vue:

在这里插入图片描述

<template>
  <div id="app">
    <div id="nav">
      <!--link 超链接-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/book">图书馆里</router-link>
    </div>
    <!--用于渲染显示页面组件的窗口：iframe-->
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

JS index.js:

在这里插入图片描述

import Vue from 'vue'
import VueRouter from 'vue-router'
import { component } from 'vue/types/umd'
import Home from '../views/Home.vue'  //饿汉模式导入组件（可能还未访问地址，先导入组件）

Vue.use(VueRouter)

//定义当前项目的路由规则：地址+页面组件
const routes = [
  {
    path: '/',        //请求的地址
    name: 'Home',     //以名字的方式定义地址
    component: Home   //要显示的页面组件
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //懒汉模式加载组件（请求地址之后加载组件）
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  
  },
  {
    path:"/book",  //请求地址
    name:"Book",
    component:()=>import("../views/Books.vue")  //加载页面视图组件
  }
]

const router = new VueRouter({
  routes
})

export default router

保存（修改的部分）页面，因配置了Live Server页面将自动刷新：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

npm install axios两种方式:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

参考：《重点》

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118018.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！