一次基于vue-cli4官网开发总结（vue基础篇）

ervinchan
802 阅读2分钟

技术栈：vue-cli4,scss,element-ui,nginx 由于公司的官网已经到了需要退休的年纪了，公司让重新构建一个有活力的静态官网，可以自由发挥，反正设计图已经出好了。。。
好吧，基于现在的前端大神都抛弃了jq，（我还真想直接上jq了），但后来考虑到那以后不是没人愿意维护，最后还是用vue吧，于是就有了这一篇文章的诞生。O(∩_∩)O哈哈~O(∩_∩)O哈哈~O(∩_∩)O哈哈~
先上效果图。


这里只贴首页界面，很简单吧。这里都是一些很基础的东西，大神就不用往下看了，主要是不想被打死，吐槽是可以的。。。。
下面是我在这个项目总结的一些vue基础知识，不一定说得好，有说得不对的请不要打死我，留言吐槽一下就好。下面进入正常开发模式：

  • vue-cli4创建项目

1、前提是需要安装好node，node直接下载安装就好了，不懂的，百度一下你就知道。
2、node安装好的环境下，输入
npm install -g @vue/cli

或者

yarn global add @vue/cli
进行安装vue-cli。
已经安装了其他版本的vue可以先卸载，
查看vue版本：vue -V
卸载：npm uninstall -g vue-cli

或者

yarn remove vue-cli
我是用yarn的，所以下面的命令都以yarn说明
2、创建项目 vue create 然后会出现默认和手动两个选项，跟着步骤走就好，我选择默认。 从3.0开始创建vue项目会自动下载node依赖包，而且结构比较简单，在根目录下会生成vue.config.js配置文件

  • 路由配置

  • 默认是不安装router的，所以需要手动安装一下 yarn add vue-router 安装完后进入路由配置。
    1、可以创建一个router.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/views/layout/Layout'
Vue.use(Router)
// 按需（懒）加载
const Home = () => import('@/views/home/Home')
const ProdList = () => import('@/views/products/ProdList')
export const router = [
    {
        path: '',
        component: Layout,
        hidden: true,
        props: true,
        navName: '',
        redirect: '/',
        children: [
            {
                path: '/',
                name: '/',
                component: Home,
                props: true,
                meta: {
                    keepAlive: true,
                    navName: '/'
                }
            },
            {
                path: '/prodList',
                name: 'prodList',
                component: ProdList,
                props: true,
                meta: {
                    keepAlive: true,
                    navName: 'prodList'
                },
                children: [

                ]
            }
        ]
    }
]
const createRouter = () =>
    new Router({
        mode: 'history', 
        base: './',
        scrollBehavior(to, from, savedPosition) {
            if (savedPosition) {
                return savedPosition
            } else {
                return {
                    x: 0,
                    y: 0
                }
            }
        },
        // scrollBehavior: () => ({y: 0}),
        routes: router
    })

export default createRouter()

注意：这里用的是'history'模式，后台服务器需要进行针对性配置，后面会讲

2、在main.js中引入router.js

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

  • element-ui使用

  • 由于这个项目比较简单，所以element-ui我们采取按需引入方式。 在mian.js中引入element-ui，我们先创建一个管理文件，路径：/plugins/element-ui.js
import Vue from 'vue'
import {
    Container,
    Header,
    Main,
    Footer,
    Button
} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Container);
Vue.use(Header);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Button)
......

然后在main.js中引入改文件即可。

  • sass使用

  • 1、全局样式引入 新建vue.config.js文件, 在module.exports中对css进行配置
module.exports = {
    css: {
        loaderOptions: {
            // 全局使用的一些scss样式，新版写法 prependData，旧版使用 data
            scss: {
                prependData: `
                @import "~@/styles/variables.scss";
              `
            }
        }
    }
}

这样就可以在项目中使用全局的sass变量样式了。
2、在内嵌样式中，需要对element-ui样式进行修改的话，需要添加 “>>>”，如：

<style scoped>
.edit_dev >>> .el-checkbox__inner { 
 padding:10px;
}// 这里我们要注意，想要修改组件样式的话，必须先用一个原生标签将这个组件包起来，然后通过父查子的方式来找到组件的类，注意这里的>>>是不可少的，要通过这个来查找
</style>

或者通过sass的方式来实现穿透

<style lang="scss" scoped>
.plan-main-panes {
    /deep/ .el-tabs__nav {
      float: none;
    }
}
</style>

  • :class动态设置样式类名

1、三元表达式
<div :class="ind.titleSrc?'bgImgSet':''"></div>
2、数组设置多个动态样式

<div
  class="el-alert"
  :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
  v-show="visible"
  role="alert"
></div>

3、利用computed计算属性设置
<div :class="_className"></div>

  • 图片引用方式

1、img标签src直接引用 <img src="@/assets/images/zrzyl/pic.png" alt=""/>
2、变量引用

<img :src="bannerTitleUrl"  alt=""/>
import bannerTitle from "@/assets/images/home/banner_title.png";
//在data中赋值
bannerTitleUrl: bannerTitle

3、css背景图引用
background: url("~@/assets/images/home/zdbg.jpg") no-repeat center;

  • svg图标引用

原本打算用fontclass,但设计图的不是扁平图标而是带不同颜色，于是使用了svg形式。下面说一下svg图标在项目中的使用
1、使用阿里图标库下载自己的图标文件，大概是包含以下这些文件

2、在项目头部（即html头）引入图标文件，因为项目中用到的是svg图标，所以我们引入的是iconfont.js，如果是用fontclass的话就引入iconfont.css；
3、在公共css文件中添加svg图标样式

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

使用如下：

<svg class="svg-icon" aria-hidden="true">
     <use xlink:href="#icon-ziranziyuan-gengdibaohu"></use>
</svg>

  • vue setInterval定时器使用

由于项目中有自己写的轮播效果，所以运用到了setInterval这个方法，但是注意vue的setInterval和window.setInterval不是同一个东西，vue实例中重写了setInterval等一整套方法。所以，千万不能和window的方法混用

定时器需要在页面销毁的时候清除掉，不然会一直存在！

最后，我们来说说路由使用'history'模式。因为官网嘛，不想在地址中看到“#”这个符号（锚点链接），看起来很low，其实更多的是因为SEO问题，如果我们挂载到服务器上的网页是直接通过vue打包的js来渲染的话，那么这个站点默认单页面应用。并且我们设置了路由模式为'history'，刷新的时候页面会出现404的情况，所以我们需要对服务器进行配置，我们使用的是Nginx，在Nginx的server部分的location中添加如下配置即可

location / {
  try_files $uri $uri/ /index.html;
}

其实我们还可以通过多入口和SSR来解决此问题，但这里只作最简方法。后续我们再讨论其他两种方法，请多关注后续分享。。。


avatar
文章
阅读
粉丝