Vue.js前端框架技术学习心得

我在web课上学习Vue脚手架（Vue CLI）是一次非常有收获的经历。Vue CLI是根据js来衍生出来的一个框架，方便我们更好的写前端的项目，可以使用各种ui框架让你更快、更方便的完成你的项目编写
Vue脚手架提供了便捷的项目初始化和配置管理。首先开始我们需要安装vue脚手架
Windows键+r 写入cmd进入命令控制器 输入npm install -g @vue/cli 即可下载脚手架

紧接着就可以创建项目了：你想在哪里创建脚手架便进入他的目录输入   
vue create xxx项目名
需要注意的是工程名字不能大写，我们选择选择Vue2或者vue3，敲下回车，那么vue将会为我们创建vue脚手架,如图就是创建成功

对了记得还需要下载node.js 可以通过网上搜索node即可去官网下载
Node.Js中文网

接下来我们进入你的项目 打开终端输入 npm run serve 即可使你的项目运行

进入http://localhost:8080/  即可访问界面

连续两次crtl+c就是关闭你的项目

 
如果想你的项目 导航更好跳转，可以使用vue-router，有人说我们为什么不适用a标签，因为vue使用的是单页面，你写的标签是不起作用的。

在终端使用   npm install vue-router 下载

在package-lock.josn 看到如图即可下载成功，或许版本过高不匹配，那就通过降版本来解决



记得在main.js里更改你的router配置



import router from '@/router/vue-router.js'
        
Vue.use(VueRouter)
 
Vue.config.productionTip = false
 
new Vue({
 
  render: h => h(App),

  router
 
}).$mount('#app')
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
Vue.use(VueRouter) 
const Product = () => import("@/views/product/index.vue");
const Crab = () => import("@/views/product/Type/crab.vue");

export default new VueRouter({
    routes: [
        {
            path: '/Layout',
         
            component: Layout,
 
            // 2级路由
            children: [
                {
                    path: '/Home',
                    name: 'home',
                    component: Home
                },
                {
                    path: '/product',
                    name: 'product',
                    component: Product,
                    //3季
                    children: [
 
                        {
                            path: '/crab',
                            name: 'crab',
                            component: Crab,
         
                        }
                        
                    ]
                },
                
            ]
 
        },
        {
            //重定向
            path: '/',
            redirect:'/crab'
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
        }
    ]
})
使用Element ui可以帮助你更好、更快的完善你的单页面，通过npm的方式： npm i element-ui -s  来帮助你在vue脚手架安装 饿了么ui，安装完成之后可以通过访问官网获取组件信息


学习Vue脚手架是一次很有收获的经历。通过Vue脚手架，我不仅加深了对Vue.js框架的理解和应用，还提升了前端开发的效率和规范化水平。我相信在今后的项目中，我会更加熟练地运用Vue脚手架，为用户提供更好的前端体验。