basis vue

basis-vue

簡介

基於Vue CLI 4構建的公司入口網站或個人部落格手腳架，開箱即用

• 多語言
• ElementUi 按需加載
• CDN 引入第三方依賴
• 路由懶加載
• 頂部導航固定
• 二級路由
• eslint 程式碼規範

注意點

1. public 資料夾的靜態資源都會被簡單的複製，而不經過webpack。詳情
2. ElementUI 是按需引入，可以更具自己的業務需求添加刪除
3. 如果不想使用引入CDN引入刪除externals節點和chainWebpack CDN配置，最後刪除public下面的index.html中CDN注入程式碼即可

專案結構

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

開發

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

# 安装依赖
yarn install

# 启动服务
yarn run dev 

打包

#打包生产包
yarn run build 

分析依賴

 yarn run preview 

Nginx 代理設定

 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;
    }
}

技術選型

科技	名稱	官網
vue	漸進式JavaScript 框架	https://cn.vuejs.org/
vue-router	路由	https://router.vuejs.org/
vuex	狀態管理	https://vuex.vuejs.org/
element-ui	基於Vue 2.0 的桌面端元件庫	http://element-cn.eleme.io
Headroom	隱藏或展示頁面元素	http://www.bootcss.com/p/headroom.js/

演示地址

捐款

如果你覺得這個計畫幫助到了你，你可以幫作者買一杯果汁表示鼓勵?

License

MIT