basis vue

basis-vue

Brief introduction

Based on the company portal or personal blog handheld by the Vue CLI 4, use it when the box is opened

• Multi -language
• Elementui loaded on demand
• CDN introduces third -party dependencies
• Route lazy load
• Top navigation fixed
• Secondary route
• ESLint code specification

Pay attention

1. The static resources of the Public folder will be simply copied without through Webpack. Detail
2. ElementUI is introduced on demand, and can be added and deleted with its own business needs
3. If you do not want to use the introduction of CDN to introduce delete externals nodes and chainWebpack CDN configuration, finally delete the cdn injection code in the iNDEX.HTML below the public

Project structure

basis-vue
    ├── public                     -- 不进过webpack打开目录
    ├── src                        -- 开发目录
    ├      ├── assets              -- 资源文件夹
    ├      ├      └── css          -- css 存放
    ├      ├      └── js           -- js 存放
    ├      ├      └── img          -- 静态图片存放
    ├      ├── components          -- 封装组件 
    ├      ├── lang                -- 多语言包
    ├      ├── views               -- 路由页面
    ├── theme                      -- element ui 主题        

Develop

# 克隆项目
git clone https: //github.com/laizuan/basis-vue.git

# 安装依赖
yarn install

# 启动服务
yarn run dev 

Pack

#打包生产包
yarn run build 

Analytical dependence

 yarn run preview 

Nginx proxy settings

 server {
	listen   80;
    charset utf-8;        
    server_name localhost;
     location / {
        root dist; #网站的根目录
        index index.html; #默认文件
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Technical selection

technology	name	Official website
vue	Progressive JavaScript framework	https://cn.vuejs.org/
vue-router	routing	https://router.vuejs.org/
vuex	State management	https://vuex.vuejs.org/
Element-UI	Desktop component library based on Vue 2.0	http://element-cn.eleme.io
Headroom	Hidden or display page elements	http://www.bootcss.com/p/headroom.js/

Demonstration address

Donate

If you think this project helps you, can you help the author buy a glass of fruit juice to explain?

License

Mit