vue脚手架搭建2022年6月版本(保姆级)

vue脚手架搭建2022年6月版本(保姆级)

目录

vue脚手架搭建2022年6月版本(保姆级)

1、Node.js环境安装

2、Node.js环境配置

3、修改国内的【阿里】镜像

4、更新npm

5、环境变量配置：

6、安装vue与router

7、安装vue脚手架

8、Vue项目创建

9、项目访问与目录层级介绍

10、路由

11、简单使用

12、axios

1、Node.js环境安装

官网地址:【Node.js】 :

为了稳定，咱们下载：【16.15.1的版本】

等待一会下载。

 清一色【Next】到最后安装：

 点击【Finish】完成

可以在C盘下【C:\Program Files\nodejs】找到【node.exe】文件

2、Node.js环境配置

在【C:\Program Files\nodejs】位置上创建两个文件夹【node_global】与【node_cache】

打开【cmd】修改配置位置：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

这里报错的【npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.】，您可以使用 –location=global Command 而不是 global –global，–local 已被弃用。

需要找到【npm】文件里面的prefix -g替换为prefix --location=global

不换也行，我是没换，如果有需要，可以自己换。

查看位置：

npm config list

3、修改国内的【阿里】镜像

npm config set registry=http://registry.npm.taobao.org

 再通过【npm config list】查询:

查看镜像是否OK

npm config get registry

确定配置完毕。

查看vue信息

npm info vue

可以看到vue的3.2..37版本 

4、更新npm

【-g】装到【global下】，就是刚才自己创建的文件夹。

npm install npm -g

5、环境变量配置：

增加环境变量NODE_PATH 内容是：【C:\Program Files\nodejs\node_global\node_modules】

C:\Program Files\nodejs\node_global\node_modules

6、安装vue与router

npm install vue -g

这里的-g是指安装到global全局目录去，就是刚才配置的环境变量位置。

查看是否安装成功：

继续安装vue的路由器。

npm install vue-router -g

7、安装vue脚手架

运行命令：

npm install vue-cli -g

由于没有设置环境变量，无法使用。

添加系统path的环境变量，路径是【C:\Program Files\nodejs\node_global】

直接添加保存即可。 

8、Vue项目创建

特别备注：项目名称不允许使用数字开头，同时项目命中不允许出现大写字母。

vue init webpack vue01

选择【npm】哦： 

国内镜像还是很快的，才30s 

通过提示的内容启动vue。

cd vue01
npm run dev

9、项目访问与目录层级介绍

访问路径：【http://localhost:8080】

恭喜，搭建成功。可以通过【VS Code】打开看看。

刚才那句话就是修改了主页面入口的【index.html】文件。

装一个【vetur】插件，显示文本好看。

10、路由

路由写法：

<!-- 字符串 -->
<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>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import a from '@/components/a'
import b from '@/components/b'
import c from '@/components/c'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {      path: '/a',      name: 'a',      component: a    },
    {      path: '/b',      name: 'b',      component: b    },
    {      path: '/c',      name: 'c',      component: c    },
  ]
})

【APP.vue】 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <router-link to="/a">A</router-link>
    <router-link to="/b">B</router-link>
    <router-link to="/c">C</router-link>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 【a.vue/b.vue/c.vue】

<template>
    <div>
        <h1>组件路径A</h1>
    </div>
</template>

<template>
    <div>
        <h1>组件路径B</h1>
    </div>
</template>

<template>
    <div>
        <h1>组件路径C</h1>
    </div>
</template>

访问测试:【http://localhost:8080/#/】按钮的ABC可以切换路径

​

11、简单使用

在【a.vue】内测试

<template>
    <div>
        <h1>组件路径A</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>

发现这里的用法是和纯js的写法类似的，都能用，但是这个不是咱们要的。 

​

12、axios

需要引入内容：【import axios from 'axios'】

import axios from 'axios'

引入就报错。 需要下载【axios】

根据提示内容下载【npm install --save axios】

下载完重新启动：

在【b.vue】中测试

<template>
    <div>
        <h1>组件路径B</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/info.json";
        axios.get(url).then(
                function(res) {
                _this.list = res.data;
            });
    }
}
</script>

 缺少读取的【./static/info.json】需要在【static】文件夹中添加一个【info.json】

[
    {"id":3,"name":"巧荣女士","introduce":"莫兰迪色小清新。"},
    {"id":4,"name":"王语嫣","introduce":"燕子坞学霸~"}
]

json文件是可以直接通过服务访问的：【http://localhost:8080/static/info.json】

访问一下B组件看看效果：【http://localhost:8080/#/b】

访问成功，axios解析json成功。解析接口也是一样的操作。

我有一个.net接口的案例，可以参考一下：

https://laoshifu.blog.csdn.net/article/details/113762115

包含了整套的增删改查，希望能对大家有所帮助。