谷粒商城学习日记（22）——使用vue脚手架搭建项目

最新推荐文章于 2024-07-01 14:10:43 发布
最新推荐文章于 2024-07-01 14:10:43 发布
阅读量307 收藏 1
点赞数
分类专栏： VUE 谷粒商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/menxinziwen/article/details/115069628
版权
本文详细介绍了如何使用Vue CLI创建项目，配置环境，初始化Vue脚手架，设置VSCode生成Vue组件的快捷指令，以及如何进行路由和组件的使用。通过创建Hello组件并结合Element UI实现简单的后台管理界面，包括菜单导航和数据表格。最后展示了如何通过路由和组件实现页面间的跳转和数据展示。
摘要由CSDN通过智能技术生成

使用vue脚手架搭建项目

使用vue脚手架搭建项目

全局配置vue脚手架依赖

首先要确保自己的npm环境是否配置好

npm config get prefix

会显示一个文件地址

系统——》环境变量——》path里面添加上面显示的地址

添加环境变量NPM值为上诉地址

打开cmd全局执行命令

没安装淘宝镜像先安装 参考
https://www.cnblogs.com/bonelee/p/9995550.html

打包工具下载

npm install webpack -g

vue脚手架下载

npm install -g @vue/cli-init

发现执行后，并没有成功。

在我的npm文件地址下 C:\Users\xxx\AppData\Roaming\npm
没有找到npm.cmd
只有cnpm.cmd

于是换了个命令执行

cnpm install webpack -g

vue脚手架下载

cnpm install -g @vue/cli-init

完成下载

初始化vue项目

首先找到一个文件夹执行cmd

vue init webpack vue-demo

第一个yes，其他的no，一直回车就行
这样就创建好了一个vue脚手架工程

目录介绍

在这里插入图片描述

bulid存放打包文件
config配置文件
node_modules npm下载的组件
src主要开发用的 里面存放各种模板页面，路由
static静态目录
package.json：相当于pom.xml
package-lock.json：依赖版本信息、源

初步使用

设置vscode生成vue组件快捷指令

文件–首选项–用户片段–输入vue
用下面片段替换

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
         
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
    },
    "http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
    }
}

路由和组件

首先在scr/components中编写组件 Hello.vue

<!--  -->
<template>
<div class=''>
    <h1>hello,你好。{{name}}</h1>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    name:"張三"
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>


</style>

在router/index导入该组件并添加路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'hello',
      component: Hello
    }
  ]
})

因为scr/main.js中使用的是app组件

修改App.vue添加跳转测试
使用router-link标签可以跳转路由地址

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--使用router-link标签 -->
    <router-link to="/hello">去hello</router-link>
    <router-link to="/">去首页</router-link>
    <router-view/>
  </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>

这样就完成了简单的路由跳转和组件

修改成简单的后台管理demo

查看element-ui文档快速导入
element-ui文档

使用element-ui

在项目中使用

npm i element-ui -S

完整引入
在 scr/main.js 中写入以下内容：
引入element-ui

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

使用element-ui的Container 布局容器组件并把内容修改到
scr/app.vue

<template>
<el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']" router='true'>
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>导航一</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="/">用戶列表</el-menu-item>
            <el-menu-item index="/hello">hello</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><i class="el-icon-setting"></i>导航三</template
          >
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'App',
  data(){
   
  }
}
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

这里我已经将数据表格抽出作为单独组件显示

 <el-main>
        <router-view></router-view>
  </el-main>

导航栏开启路由功能

 <el-menu :default-openeds="['1', '3']" router='true'>

设置路由地址

 <el-menu-item index="/">用戶列表</el-menu-item>
            <el-menu-item index="/hello">hello</el-menu-item>

scr/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import Index from '@/components/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/hello',
      name: 'hello',
      component: Hello
    }
  ]
})

编写src/components/Index.vue组件，既抽取的table表格

<!--  -->
<template>
  <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
     //这里存放数据
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>

这样就完成后台管理系统的demo,点击左侧导航可以定位到路由

合格的搬砖人
关注
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4653
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
使用vue脚手架搭建项目详解
大白能的博客
02-24 7316
安装vue脚手架 这里的版本是vue cli4 cnpm i @vue/cli -g 启动vue脚手架图形化界面 打开命令行，输入以下命令 vue ui 通过vue脚手架图形化界面创建项目 选择项目目录 ...
五、伊森商城 前端基础-Vue Vue脚手架原理与使用 p27
你甚至不愿意叫我一声伸哥
12-07 677
vue工程的使用、router做路由规则，router文件夹下的index.js配置路由，看看能访问什么路径，不同路径不同的渲染效果、components文件夹存放组件，用组件渲染前端、文件的调用关系
vue脚手架项目-电商后台
qd520_1314的博客
04-25 628
ue-api-server 目录，运行如下命令，进行恢复安装 npm install 新建数据库 shop_admin，找到 db 目录下的 shop_admin.sql ,将数据导入 查看 config 目录下的 default.json ，修改数据库配置信息与你的数据库一致 运行如下命令，启动后台项目 [](()二、码云 ================================================================= [](()1.引入库 vue-shop 目录下
使用Vue 2 + Element UI搭建后台管理系统框架实战教程
最新发布
qq_42072014的博客
07-01 2707
通过上述步骤，我们构建了一个基于Vue 2和Element UI的后台管理系统框架。这个框架提供了基础的页面布局、路由管理、组件使用、状态管理及响应式设计等核心功能。实际开发中，还需根据具体需求，进一步细化功能模块，优化用户体验，集成后端API，实现数据的CRUD操作，以及考虑安全性、性能优化等方面，以构建出既美观又实用的后台管理系统。
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
刘大猫
03-31 1062
vue-cli脚手架初始化项目生成文件的介绍
全栈项目电子商城总结之脚手架vue-cli
qq_23864401的博客
07-24 402
平时学习不建议用脚手架，毕竟直接用脚手架直接降低了webpack的使用难度，建议学了webpack之后再使用vue-cli。不过在用vue完成核心的功能后可以尝试vue-cli快速创建一个项目，进行全栈技能训练，本篇主要总结一下之前做的一个全栈开发的小商城的起步阶段，内部逻辑实现今天写不动了，后面再补上吧。 起步 安装vue-cli： 脚手架创建项目shopmall，这里有个小tips：在控制...
【谷粒学院项目开发10】Vue入门案例
taroriceball的博客
12-09 127
1.创建html页面，使用vscode快捷键生成html代码 输入!点击下面出现的提示就能快速生成html代码 2.引入vue的js文件 复制到我们的项目文件里 3.在html页面中创建div标签，div添加id属性 4.编写vue代码，这是固定的结构 5.使用 插值表达式 使用 {{}} 获取data里面我们定义的值 6.测试 ...
Vue3 脚手架搭建项目详细过程
zyf971020的博客
10-12 1万+
Vue3 脚手架搭建项目详细过程及代码规范配置
Vue开发项目入门——Vue脚手架
热门推荐
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
使用vue脚手架搭建项目详细解说
Im_xiaopei的博客
10-05 2899
1.脚手架安装 在cmd中全局安装vue脚手架，输入npm i@vue/cli -g 安装脚手架完毕 2.通过vue脚手架创建项目，创建项目有两种的方式，这里介绍的是使用图形化界面来创建，命令是vue ui。 在项目文件中打开cmd命令框，输入vue ui命令，点击回车，等待执行完毕，自动打开视图界面，如下： 填写项目名字，这里不支持中文，注意一下，然后下一步 选择手动配置，进行下一步， 创建项目时，以下四个功能一般需要选择 Babel Router Linter...
基于vue2.0+element-ui的管理后台实例源码
09-05
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考
vue+elementui 的管理后台源码稍微有些复杂
05-25
vue+elementui 的管理后台源码，稍微有些复杂，适合对vue有一定了解的同学
基于elementUI的vue后台管理系统
11-21
基于elementUI的vue后台管理系统，下载之后先npm install 然后npm run dev 直接可以使用。
使用vue-cli2.+搭建脚手架vue仿小米商城Web
weixin_42661283的博客
03-02 820
安装vue-cli脚手架 npm i vue-cli -S 使用vue查看是否安装成功 使用vue init webpack 初始化构建项目 最后一步，我选择的是no ，用的是淘宝镜像进行安装依赖包，默认选中yes 安装完成后，项目目录如下： 到这里，基本的项目就搭建起来了。 运行 npm run dev 指令就可以访问页面了 运行成功，直接访问地址： ...
Vue小白入门项目之商城项目初始化(一)
mercies的博客
02-09 397
Vue小白入门项目学习
使用脚手架快速搭建前后台管理系统（秒杀电商）
匿名攻城狮
02-08 849
前后端分离、使用脚手架快速搭建并整合。
利用vue-cli(脚手架)一步一步构建一个仿当当网项目
New前端工厂的博客
08-20 807
项目图 开发环境的搭建 这里我就不多叙述了，直接看我的这个文章有详细步骤 vue项目构建步骤 开发环境统一化 用一个插件 ESLint 我用的是vscode，所以就直接在插件里面下载了。 项目中已经自动安装了，所以不用给项目添加依赖了。 安装完插件后需要在，vscode中的首选项 设置中的 settings.json中添加设置 "editor.tabSize": 2,//设置按tab键等...
Vue + ElementUI 制作后台管理类项目
Ljj9889的博客
04-17 5713
历时2周左右，我终于完成了我的毕业项目。虽说页面不是特别美观，但是对于一个后端开发人员来说，我觉得已经是很不错了。今天主要分享前端页面的实现，以及如何对接后端的接口，先看项目效果。 一、页面展示 登录界面 管理界面 数据操作 二、代码展示 登录页代码 <template> <div class="login_page"> <div class="logo"> <div class="txt">九江</d
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值