美文网首页我的武林秘籍
给学生党的vue教程（vue全家桶+Element）

给学生党的vue教程（vue全家桶+Element）

作者: 弓长晓 | 来源:发表于2020-02-10 17:12 被阅读0次
    vue.js

    这个教程只是给我妹妹写的课外作业，并没有太多高级东西，只适合于有点前端基础的小白，
    忠于兴趣，诚待文字，取悦自己，理解他人。

    01-- 项目准备

    01-1 安装

    1兼容性 ：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
    2直接用 <script> 引入：

    3[CDN]https://cn.vuejs.org/v2/guide/installation.html#CDN "CDN"对于制作原型或学习，你可以这样使用最新版本：

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

    <script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

    你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。

    4NPM在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

    # 最新稳定版
$ npm install vue
# vue版本号
$ npm install vue@vue版本号

    既然我们要用npm装包就需要一个package.json 来记录存放第三方包的依赖

    # 创建一个空的文件夹
$ mkdir vue-maer
$ cd vue-maer
# 然后，调用 npm init 来初始化 package.json，
# 参数 -y 表示对 npm 要求提供的信息，都自动按下回车键，表示接受默认值
$ npm init -y

    基础规范，我们的项目最好不要用中文命名

    #i 是 install 的缩写
$ npm i vue

    01-2使用vueCLI创建项目

    $ vue create vue-admin
------------
# 第一步：选择创捷模式
Vue CLI v3.9.1
┌───────────────────────────┐
│  Update available: 4.2.2  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
# 默认自动选择模式
  default (babel, eslint)
#手动选择模式
>  Manually select features
------------
# 第二步
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel   #将ECMAScript6转化为ECMAScript5的一个工具
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router   #vue初始路由
 ( ) Vuex
 (*) CSS Pre-processors #css预处理器
 (*) Linter / Formatter #代码校验格式化
 ( ) Unit Testing
 ( ) E2E Testing
------------
# 第三步--使用路由模式（history）
? Use history mode for router? (Requires proper server setup for index fallback in production) 
(Y/n) n
------------
# 第四步--选择css预处理器
 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus
------------
# 第五步--选择代码验证格式风格
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier
------------
# 第六步--选择代码校验方式
? Pick additional lint features:
>(*) Lint on save 文档保存的时候，会进行格式验证
 (*) Lint and fix on commit  在进行git commit 时候，会进行代码校验，并且尝试自动解决错误语法
------------
# 第七步--选择配置注册
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
> In dedicated config files 独立配置文件
  In package.json 注册到package.json当中。但维护比较麻烦
------------
# 第八步--是否进行模板化
? Save this as a preset for future projects? (y/N) n
将此保存为将来项目的预设？（是/否）否
    安装成功 
    #根据提示进行启动项目
 $ cd vue-admin
 $ npm run serve
    项目启动
    浏览器项目启动

    2020年2月2日更新

    01-3目录结构

    ├── README.md            项目介绍
├── index.html           入口页面
├── build              构建脚本目录
│  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面
│  ├── build.js            生产环境构建脚本
│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│  ├── dev-server.js          运行本地开发服务器
│  ├── utils.js            构建相关工具方法
│  ├── webpack.base.conf.js      wabpack基础配置
│  ├── webpack.dev.conf.js       wabpack开发环境配置
│  └── webpack.prod.conf.js      wabpack生产环境配置
├── config             项目配置
│  ├── dev.env.js           开发环境变量
│  ├── index.js            项目配置文件
│  ├── prod.env.js           生产环境变量
│  └── test.env.js           测试环境变量
├── mock              mock数据目录
│  └── hello.js
├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src               源码目录  
│  ├── main.js             入口js文件
│  ├── app.vue             根组件
│  ├── components           公共组件目录
│  │  └── title.vue
│  ├── assets             资源目录，这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              应用级数据（state）
│  │  └── index.js
│  └── views              页面目录
│    ├── hello.vue
│    └── notfound.vue
├── static             纯静态资源，不会被wabpack构建。
└── test              测试文件目录（unit&e2e）
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js

    2020年2月4日更新

    01-4 入口模型

    • 找到main.js入口模型
    import Vue from 'vue'
import App from './App.vue'
import router from './router' //加载路由

Vue.config.productionTip = false

new Vue({ //创建vue实例
  router, //绑定路由
  render: h => h(App)// 将app根主件
}).$mount('#app')//替换到页面的#app节点上
    • 在入口模块中
      • 加载根组件
      • 加载路由
      • 创建vue实例
      • 根据组件替换到页面中 #app节点

    01-5 git版本控制

    git的基本使用就不在这里讲述了有兴趣的请看git 连接远程仓库如有疑问请联系我
    我就描述项目过程：

    创建项目 
     #拷贝项目到本地
 git clone git@github.com:dileigege/dileigege-vue-admin.git
 #将隐藏文件git 复制到项目 
 git add .
 git  status
 git commit -m "提交日志-初始化"
 #项目就我一个人，所以我就用主分支
 git push
    项目保存到远程仓库
    2020年3月10日更新
    最近接了项目，就停更了。项目今天后继续更新

    01-6 目录整合

    ① App.vue 调整
    切记由于我们的项目使用了 eslintrc所以我们必须按照规范写，也许这个你觉的很麻烦，但是你可知道你不规范代码可能增加伙伴的工作。eslintrc

    <!--  -->
<template>
  <div></div>
</template>

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

<style lang='less' scoped>
</style>

    ② views components文件夹内的文件，清空不需要了
    ③router路由调整（用我们自己的项目需求调整）

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

    ④项目目录补充

    1. api目录 接口封装模块
    2. directive 指令目录
    3. filters 过滤器目录
    4. store 状态容器模块
    5. styles 样式目录
    6. utils 工具模块

    ⑤引用静态文件将图片资源放置 assets , public中，引用字体文件在public - index.html中

    2020年3月12日更新

    01-7 导入Element

    npm 安装
    推荐使用 npm 的方式安装，它能更好地和 webpack打包工具配合使用。

    npm i element-ui -S
---安装成功--
dependencies": {
    "core-js": "^3.6.4",
    "element-ui": "^2.13.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5"
  },

    为了更好的食用，请按照个人项目进行.eslintrc.js可以参考食用

    1ESLint 配置文件 .eslintrc 示例及说明
    2错误提示

    module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    "space-before-function-paren": 0,
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    "space-before-function-paren": ["error", {
       "anonymous": "always",
       "named": "always",
       "asyncArrow": "always"
     }],
     'semi':['err','always']
  }
}

    你可以引入整个 Element，在main.js 中写入以下内容：完整内容，

    import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 完整引用Element
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

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

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

    App.vue页面添加Element

    <template>
  <div>
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
</el-row>
  </div>
</template>
    App.vue

    2020年3月13日更新

    02项目开始

    02-1登陆板块

    主要步骤：页面布局 验证码 提交登陆 表单验证
    我们的项目主要是应用Element，但在一些项目中，UI给我们的设计图，ElementUI并不能满足，所以我们就需要做一些调整

    02-1-1 画UI


    本人不是专业UI，所以能看就行，请专业的不喜勿喷，都是公司的压迫层，更应该相亲相爱，毕竟我们可能是唯一理解你们“五彩斑斓黑”的人

    02-1-2 登陆组件及路由配置

    首先我们先在view文件夹创建两个组件模块，Login - index.vue home - index.vue 这里的view可以狭义的理解为 mvc中的视图层，MVC是后端世界中一种经典的设计模式，全名为Model-View-Controller，即模型-视图-控制器，去过vue官网几次的人就知道，vue的设计模式是MvvM，有点多了，我们专注项目。
    3-0对vue核心的理解 MVVM
    文件router-inde.js首页路由和登陆页路由

    const routes = [
  {
    name: 'home',
    path: '/',
    component: () => import('@/views/home')
  },
  {
    name: 'login',
    path: '/login',
    component: () => import('@/views/login')
  }
]

    app.vue调用路由组件

    <template>
  <div>
    <router-view/> 调用组件
  </div>
</template>

    02-1-3 页面编写

    login-index.vue页面 表单组件

    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

    既然UI框架给了我们样式，我们就使用UI框架给的样式，不符合样式的我们可以进行调整，效率在我们的工作中也很重要。
    style-style.less AND main.js

    /*
 * @description:  公共样式 
 * @param : NO
 * @return: NO
 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
    margin: 0;
    padding: 0;
}
// 清除浮动
clearfix {
    *zoom: 1;

    /*ie*/
    &::after,
    &::before {
        content: '';
        display: table;
    }

    &::after {
        clear: both;
    }
}
// .box7 {
//     @extend %clearfix;
// }

 html , body {
     height: 100%;
 }

在main.js中添加
import './styles/style.less'

    样式就大家想怎么写就怎么写吧，如果样式写不了，我建议你去再学学，HTML+css吧，虽然说这两个宝贝并不难，但也并不简单，

    相关文章

      网友评论

        本文标题：给学生党的vue教程（vue全家桶+Element）

        本文链接：https://www.haomeiwen.com/subject/sblnactx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        我的武林秘籍

        关于我们|服务条款|联系我们|给学生党的vue教程（vue全家桶+Element）|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！