Vue 3 快速上手
官网：
Vue 3
https://cn.vuejs.org/
node.js
http://www.nodejs.com.cn/
配置环境变量和nodejs
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两种方式:
参考：《重点》
