当前位置：首页 > news >正文

Vue 3 快速上手

news 来源：原创 2024/5/7 18:15:48

Vue 3 快速上手

- 官网：
- 配置环境变量和nodejs
- node vue 开发环境搭建
- - 第二天的时候，vue create xxx.xxx.xxx(项目名)失败！
- 前端项目问题解决
- - ==第二天修改环境配置之后：（纠正之后）==
- 概念/思想：
- 创建项目：
- cmd代码如下:
- 运行项目：
- 将项目拖到vscode中打开进行编辑：
- - ==纠正==
  - 纠正后的项目整体布局：
- 对项目目录中的文件进行介绍：
- 代码提示&语法高亮插件
- 在vue脚手架项目中添加自己的功能页面:
- - Book.vue:
  - Book.vue(补充：引入axios)
  - App.vue:
  - JS index.js:
- 保存（修改的部分）页面，因配置了Live Server页面将自动刷新：
- 参考：《重点》

官网：

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