Vue scaffolding installation method - May 28, 2023 version
Table of contents
Node environment variable configuration
npm global folder and cache folder settings
Modify the domestic [Ali] mirror image
Configure new environment variables
Access through the vue service path
Introduce axios operation (equivalent to ajax):
node download
The node version uses the latest version:
Unzip directly after downloading
Node environment variable configuration
Since we downloaded the decompressed version, we can configure the environment directly.
Open my computer, properties, configure environment variables
Just follow the steps below:
Check npm version
npm -v
npm global folder and cache folder settings
Create two folders [ node_global ] and [ node_cache ] under the current folder
Right-click [New Folder]
Open [cmd] to modify the configuration location:
You can execute it after changing the folder path yourself.
npm config set prefix "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global"
npm config set cache "D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_cache"Execution effect:
Check whether the configuration is successful
npm config list
Modify the domestic [Ali] mirror image
If it is a foreign mirror address, it will be modified to domestic, if it is a domestic mirror address, it will not be changed.
npm config set registry=http://registry.npm.taobao.org
npm config list
Through this command, you can directly check whether it is from Taobao
npm config get registry
view vue information
npm info vue
Let's copy it, where [-g] represents the folder installed to the global, that is, [D:\save\exe\Servers\nodejs\node-v20.2.0-win-x64\node_global] we configured.
npm install -g [email protected]Upgrade directly to the corresponding version.
Install VUE and routing
npm install vue -g
npm install vue-router -gYou can see the xue and vue routers we just installed under [node_modules] under the global folder.
Install the vue client
npm install vue-cli -gAlthough there is an abnormal prompt, 230 files are successfully installed.
Install vue init
npm install -g @vue/cli-init
View vue version
vue -V
Configure new environment variables
Just follow the steps
Create a Vue project
Special Note: Project names are not allowed to start with numbers, and capital letters are not allowed in project hits.
Find an empty folder to create the project:
vue init webpack vue01
Create the finished effect:
project
Start the Vue project
cd vue01
npm run devThere is a network prompt to allow it.
Service cmd page
Access through the vue service path
Successful access: http://localhost:8080/
Vue level description
source directory
vetur plugin installation
Just search for the first installation of vetur in the extension.
Demo example
<hr/>
<input type="text" v-model="msg" placeholder="与msg双向绑定"/>
<hr/>
Test results:
Routerrouting
Route usage syntax:
<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="'/home'">Home</router-link>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link :to="{ path: '/home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: '9527' }}">User</router-link>
<!-- 有查询参数，下面的结果为 `/register?plan=private` -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
Register
</router-link>Routing practice:
Add 3 components under components: [demo1.vue], [demo2.vue], [demo3.vue]
Set up routing:
We operate routing in index.js under [router]
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{ path: '/demo1', name: 'demo1', component: demo1 },
{ path: '/demo2', name: 'demo2', component: demo2 },
{ path: '/demo3', name: 'demo3', component: demo3 }
]
})We added routes to all three demos.
Add a hyperlink to the home page
<hr/>
<router-link to="/demo1">我是demo1</router-link>
<router-link to="/demo2">我是demo2</router-link>
<router-link to="/demo3">我是demo3</router-link>
<hr/>The added file is [App.vue], just intersperse it directly in the middle, and use hr to divide it.
Page effect:
Jump effect: the path matches the content, and the test is successful.
Table traversal test demo3
Copy the following code to the demo3.vue file.
<template>
<div>
<h1>组件路径Demo1</h1>
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>简介</td>
</tr>
<tr v-for="(item,key) in list" :key="key">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.introduce}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return {
list:[
{id:1,name:"学习强国",introduce:"人民有信仰"},
{id:2,name:"强国强己",introduce:"国强民必强"}
]
}
}
}
</script>
<style>
table{
width:100%;text-align:center;
}
</style>Copy it directly to the demo3.vue file:
Introduce axios operation (equivalent to ajax):
import axios from 'axios'
Error message.
Ctrl+c stops the service, and executes the command as prompted.
Restart:
npm run dev
Axios example:
data preparation.
[
{ "id": 1, "name": "学习强国", "introduce": "人民有信仰" },
{ "id": 2, "name": "强国强己", "introduce": "国强民必强" }
]
static static path access test:
http://localhost:8080/static/data.json
Axios parses the json file:
Replace all code of demo2.vue below
<template>
<div>
<h1>组件路径demo2</h1>
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>简介</td>
</tr>
<tr v-for="(item,key) in list" :key="key">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.introduce}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
list:""
}
},created:function(){
var _this = this;
var url = "./static/data.json";
axios.get(url).then(
function(res) {
_this.list = res.data;
});
}
}
</script>
<style>
table{
width:100%;
border-collapse: collapse;
}
</style>Effect:
It means that the json has been parsed without any exception.
The basic operation of vue has been explained here. I believe that after this point, as long as you know something about the front end, you can almost say that you can get started. I wish you all the best in your work.