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

node vue 开发环境搭建

1.安装node.js

安装到默认目录下，

安装之后，可以访问node命令

2.配置node命令的环境变量

3.创建npm下载的全局目录和缓存目录

在磁盘的任意位置，新建如下两个目录:node_global,node_cache

创建环境变量

4.编辑系统的path变量，将NODE_HOME和NODE_PATH配置到path中

5.配置npm的下载路径和缓存路径

npm config set prefix "你自己的node_global的目录"

npm config set cache "你自己创建的cache目录"

6.检查配置

7.配置npm的下载镜像

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

8.安装vue开发需要的一堆模块

npm install webpack@3.6.0 -g
npm install webpack-dev-server@2.9.1 -g
cnpm install -g @vue/cli@4.1.1

前端项目问题解决：

1.如果node.js的版本是14

安装@vue/cli 4.1.1的版本
npm是6.14.X

2.文件权限问题

a.用管理员身份启动cmd

b.配置文件权限

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

1.在views目录下创建vue页面

<template>
    <div>
        <h1 @click="test">{{msg}}</h1>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                msg:"这是我的图书管理页面"
            }
        },
        methods:{
            test(){
                alert(123);
            }
        }
    }
</script>
<style scoped>
 h1{
    color:red;
 }
</style>

2.在页面入口App.vue添加图书页面的超链接

3.点击超链接的时候，会进行内容切换。对于切换显示的具体内容。需要在router模块配置