Vue+Element实战项目笔记（一）（持续更新中）

张张碎碎念
501 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

新公司使用的技术栈是vue，于是我打算快速学习一下，看了两天教学视频，太枯燥了，一看就困。于是找了bili上的vue项目实战（是【vue项目实战教程】这位博主的，非常感谢），简单的记录一下学习的过程。

一、项目介绍

1.技术栈

yuque_diagram.jpg

2.步骤

  1. 项目搭建+使用element实现首页布局
  2. 顶部导航菜单及与左侧导航联动的面包屑联动
  3. 封装一个Echarts插件
  4. 封装一个Form表单组件和Table表单组件
  5. 企业开发之权限管理思路讲解

二、脚手架的搭建

1.yarn相对于npm的优势

Yarn是由Google,Facebook,Exponent和Tilde联合推出的一个js包管理工具，是为了弥补npm的一些缺陷出现的

  • 速度快：并行安装，npm是按照队列，依次安装，yarn是并行安装，提高性能；离线模式，如果之前安装过，再次安装会从缓存中获取，npm要从网络上下载
  • 安装版本统一: 为了防止拉取到不同的版本，Yarn有一个锁定文件（lock file）记录了被确切安装上的版本号，每增加一个模块，就会创建或更新yarn.lock这个文件，这样就保证了每一次拉取同一个项目依赖，使用的都是一样的模块版本；npm同一个项目安装的时候无法保证一致性，同一个项目会由于安装的版本不一致出现bug
  • 更简洁的输出：命令行里yarn只打印必要的信息
  • 多注册来源处理
  • 更好的语义化：yarn改变了一下npm命令的名称，更清晰

2.yarn和npm命令的对比

npmyarn
npm installyarn
npm install react --saveyarn add react
npm uninstall react --saveyarn remove react
npm install react --save-devyarn add react --dev
npm update --saveyarn upgrade

3.vue-cli4脚手架搭建

1.安装node.js

官网地址

自带npm的环境，如图即安装成功

2.安装cnpm

  1. 说明：npm(node package maneger)是nodejs的包管理器，用于node插件管理
  2. 选装cnpm,因为npm安装插件是从国外服务器下载，网络影响大，可能出现异常
  3. 安装命令：npm install -g cnpm -registry=registry.npm.taobao.org
  4. 我这里报了个错，解决办法是用管理员省份运行Windos PowerShell，输入set-ExecutionPolicy RemoteSigned这个命令，然后根据提示输入A，再次执行cnpm-v,成功了

3.安装yarn

命令：npm install -g yarn 如图即安装成功

4.安装vue-cli脚手架构建工具

命令：cnpm install -g @vue/cli

三、创建项目

命令：vue create 项目名称（不能有大写字母）

运行项目：npm run serve

四、element-ui

官方文档

全局引入

  1. npm i element-ui -S
  2. 在 main.js 中写入以下内容： import ElementUI from'element-ui';
    import'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI)

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

按需引入

  1. 项目打包：npm run build,会自动生成一个dist文件夹
  2. 在 main.js 中写入以下内容：

import {Button} from'element-ui';
Vue.use(Button)

需要什么组件引入什么组件，按需引入太麻烦，但是速度要比全局引入快，性能会提高很多，可以看一下两种引入方式生成的dist包的大小，按需引入要比全局引入小很多，不过个人建议使用全局引入

五、Vue路由的使用

  1. 命令行里输入：npm i vue-router@3.2.0
  2. 根文件创建文件夹router,在main.js中引入
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
  1. 在router文件夹里创建index.js
import VueRouter from "vue-router";
import hHome from "../views/hHome.vue"
Vue.use(VueRouter)

const routes = [
    {
        path:'/',
        name:"Home",
        component:hHome
    }
]
const router = new VueRouter({
    mode: 'history',
    routes

})

export default router
  1. 在根文件下创建views文件夹，新建hHome.vue(驼峰命名法，不然会报错)，
    <div>我是home</div>
</template>
<script>
export default{
    name:'hHome',
    data(){
        return {}
    }
}
</script>

image.png

avatar
文章
阅读
粉丝