关于vue.js:从零开始用elementui躺坑vue-初始化项目

我的项目简介

小编公布本博客的目标是应用PanJiaChen大佬的vue-element-admin、elunez大佬后有感而发,依据这两位大佬的前端模版编写文档。本次博客预计公布周期预计为3个月,公布数量预计在30~50篇。心愿各位看客多多珍藏,点赞,评论。特此说明

技术栈

本我的项目采纳Vue + ElementUI + axios + Vue-Router + Vuex。对于技术选型,我会在下一篇中独自做阐明。

1. 装置Node

下载地址:https://nodejs.org/en/download/
留神:
下载LTS版本。即Long Term Suppot: 长期反对版本

装置并配置胜利:

node -v

npm -v

2. 装置webpack

webpack官网文档: https://www.webpackjs.com

npm install –save-dev webpack

留神:
不举荐全局装置 webpack。这会将你我的项目中的 webpack 锁定到指定版本,并且在应用不同的 webpack 版本的我的项目中,可能会导致构建失败。

装置并配置胜利:

webpack -v

3. 装置vue-cli

对于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你曾经全局装置了旧版本的 vue-cli (1.x 或 2.x),你须要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

npm install -g @vue/cli

装置并配置胜利:

vue -V

4. 初始化我的项目

vue init webpack <项目名称>

5. 启动我的项目

cd vue-admin-platform

npm run dev

6. 查看我的项目目录

├── build // 构建相干
├── config // 配置相干
├── node_modules // npm模块
├── src // 源代码。这是咱们重点关注的内容
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 疏忽项
├── index.html // html模板
└── package.json // package.json
└── README.md // 文档阐明

7. 新增我的项目目录如下:

├── build // 构建相干
├── config // 配置相干
├── src // 源代码
│   ├── api // 所有申请
│   ├── assets // 主题 字体等动态资源
│   │   ├── img // 动态图片
│   │   ├── css // css文件
│   ├── components // 全局专用组件
│   ├── directive // 全局指令
│   ├── filtres // 全局 filter
│   ├── icons // 我的项目所有 svg icons
│   ├── lang // 国际化 language
│   ├── mock // 我的项目mock 模仿数据
│   ├── router // 路由
│   ├── store // 全局 store治理
│   ├── styles // 全局款式
│   ├── utils // 全局专用办法
│   ├── vendor // 专用vendor
│   ├── views // view
│   ├── App.vue // 入口页面
│   ├── main.js // 入口 加载组件 初始化等
│   ├── settings.js // 我的项目根本设置
│   ├── permission.js // 权限治理
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 疏忽项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
└── README.md // 文档阐明

参考资料

  1. vue.js
  2. webpack

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据