Vue安装脚手架之后如何启动及一些注意事项

首先我们要先在终端控制面板（cmd）里面输入node -v这个指令检查自己的电脑是否安装了node这个软件

 然后我们接着安装脚手架项目，我们还是接着在终端控制面板（cmd）里面接着输入 npm install -g @vue/cli这个命令进行安装，如何检查自己是否安装成功，输入vue -V这个指令

如果上面两个都安装成功，我们就可以通过在终端控制面板（cmd）里面接着输入vue create来创建脚手架项目了。

打开我们的调试工具Visual Studio Code把我们创建的项目整个拖动到我们的Visual Studio Code里面，就可以看到我们的整个项目了，项目界面如下：

其中node_modules是一个文件依赖包，public里面装的是一些html的设置，router里面装的是一个很重要的文件它就是路由，路由又是什么呢？它是把我们的界面显示在页面的一个重要的东西。

我们要储存的照片放到assets里面。

views里面就是显示的页面。main.js里面装的是我们的一下工具，只装了element-ui这个组件

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//导入
import router from './router'
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

当我们这些东西都做好了之后我们该怎么样去启动我们的界面呢？

步骤就是我们把鼠标定位到vue.config.js这个文件上面点击右键选择在集成终端打开，步骤像我这样

输入npm run serve这个命令后点击回车键后等待一会后，项目会给我们生成两个网址，如下：

接着把鼠标定位到网址上，先按住键盘上的ctrl键再点击左键后就可以进入我们的页面，如下：

怎么才能把界面实现成我这样，这就要用到element-ui这个组件和路由了。

路由的设置如下：

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
    //元数据
    meta:{
      title:"首页",
      isShow:true
    }
  },
  {
    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/AboutView.vue")
  },
  //路由
  {
    path: "/Login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/LoginView.vue"),
      meta:{
        title:"登录",
        isShow:false
      }
  },
  {
    path: "/User",
    name: "User",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/UserView.vue"),
      meta:{
        title:"用户",
        isShow:true
      }
  },
  {
    path: "/Order",
    name: "order",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/OrderView.vue"),
      meta:{
        title:"订单",
        isShow:true
      }
  },
  {
    path: "/Shopping",
    name: "shopping",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/ShoppingView.vue"),
      meta:{
        title:"商品",
        isShow:true
      }
  }
  ,
  {
    path: "/datail",
    name: "datail",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/DatailView.vue"),
      meta:{
        title:"详情",
        isShow:true
      }
  }
];
// 初始化路由实例
const router = new VueRouter({
  routes,
});

// 导出
export default router;

element-ui设置我这里以登录页为例：

<template>
    <div class="login">
        <!-- 这是登录页 -->
        <div id="big">
            <div class="small">
                <div class="bq"><h3>mall-admin</h3></div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item  prop="user" >
                        <el-input  v-model="ruleForm.user" prefix-icon="el-icon-user-solid"></el-input>
                    </el-form-item>
                    <el-form-item  prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password
                        prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button id="bt" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style>
#big {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.small {
    width: 500px;
    height: 250px;
    box-sizing: border-box;
    padding-right: 80px;
    background-color: rgb(166, 226, 237);
}
.bq{
    text-align: center;
    color: blue;
    width: 500px;
    height: 5vh;
}
#bt{
    width:100%;
}
</style>

<script>
export default {
    name: "LoginView",
    data() {
        var checkuser = (rule, value, callback) => {
            if (value ==="") {
                return callback(new Error("用户不能为空"));
            }else{
                if (this.ruleForm.checkuser !== "") {
                    this.$refs.ruleForm.validateField("checkuser");
                }
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        return {
            ruleForm: {
                pass: "",
                user: "",
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                user: [{ validator: checkuser, trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

如果大家想要把界面设置得更好看、更美观我这里把element-ui这个组件的官网粘贴出来以便大家使用Element - 网站快速成型工具​​​​​​

还有两个点：1.路由配置好后我们该去哪里调用它？ 2.如何把element-ui里面的东西渲染到我们的界面上？

首先，我们的路由配置好之后我们该去哪里把它实现出来，这里我依旧以登录页作为例子，我们先打开router里面的index.js这个文件，然后我们会看到如下的代码，这里是我自己写上的，大家也不用纠结里面的是什么，照着操作就好。其实也好理解path就是路由的意思，页面要调用的名字就是name里面的名字，

 path: "/Login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/LoginView.vue"),
      meta:{
        title:"登录",
        isShow:false
      }

然后我们再到veiw这个文件里面找到对应到跳转的文件，如下：

其实很简单的，就是在这个页面的template标签里面的div这个标签加上class="login"这句话就已经给这个界面配置了一个属于它的路由了。

最后给大家看一下利用这些工具执行后的我写的登录界面吧。

Vue3 和 Vue2 的几个明显的区别：
（1）Vue2使用的选项式API，Vue3使用的是组合式API。前者随着项目页面体积的增大，对于代码的管理会给使用者带来更大的心智负担；后者组合式的写法，将data和methods等组合在一起，更容易理解和使用。不过对于初学者而言，可能会有些不太适应。
（2）Vue2使用的js构建的源码和使用方式，Vue3使用ts构建的源码，使用方式也支持ts，对于大型项目而言，更加友好，不过对于小型项目而言，往往使用者无法一下子看出ts对于强类型支持带来的好处，相反会觉得麻烦和没有必要。
（3）由于该项目是为了简要说明Vue3和Vue2在页面中的区别，方便急于使用Vue3的同学构建项目和页面，所以没有将Vue3更多的特性展示出来。在下一篇文章中，将会通过一个更加完整的项目，对Vue3的更多其他特性以及和Vue2的区别进行深入的解析和说明，敬请期待。