search

wuyuedefeng / blogs

博客文章在issue中
5 stars 0 forks source link

Rails 引入--webpacker=vue Or Vite #53

Open wuyuedefeng opened 4 years ago

wuyuedefeng commented 4 years ago

初始化引入

$ rails new service-api -d mysql --webpack=vue --skip-bundle

手动引入

创建controller

$ rails g controller vue index

config/router.rb

get '/vue', to: '/vue#index', format: false

app/views/vue/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

package.json

{
  "scripts": {
    "start": "npm run start:webpacker & npm run start:rails",
    "start:webpacker": "./bin/webpack-dev-server --hot",
    "start:rails": "rails s"
  }
}

run npm start then visit http://localhost:3000/vue

完善vue路由

将vue-router引入app/javascript/packs/main.js的vue实例中

引入PxRem支持

$ yarn add postcss-pxtorem -D
$ yarn add amfe-flexible

postcss.config.js append below code

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    // AppendMe
    require('postcss-pxtorem')({
      rootValue: 37.5, // 效果图375
      propList: ['*'], // 属性的选择器，*表示通用
      selectorBlackList: ['.px-'], //   忽略的选择器   .ig-  表示 .ig- 开头的都不会转换
    })
  ]
}

app/javascript/packs/main.js

// for pxtorem
import 'amfe-flexible'
wuyuedefeng commented 4 years ago

capistrano 服务器部署

  1. 安装yarn

    # ubuntu
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt install yarn

  2. gem 'capistrano-yarn'

  3. deploy.rb

    append :linked_dirs, ..., "public/packs", "node_modules"

本地编译部署：https://zh-cn.dev4app.com/archives/43911610-deploy-rails-5-1-webpacker-app-with-capistrano.html image

wuyuedefeng commented 3 years ago

vite

添加gem

gem 'vite_rails'

then

$ bundle install
$ bundle exec vite install

cd app/frontend

$ yarn create @vitejs/app vue3

then 拷贝app/frontend/vue3/package.json中的依赖 到 项目跟录下的 package.json then 拷贝app/frontend/vue3/vite.config.js中的功能 到 项目跟录下的 vite.config.ts then 删除app/frontend/vue3中的除src目录的其他文件和文件夹，并将src的内容移到vue3中

创建controller

$ rails g controller vue3 index
# config/router.rb
get '/vue3', to: 'vue3#index', format: false

创建app/views/vue3/index.html.erb


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="Example on how to use Inertia.js to build the frontend with Vue.js within a Ruby on Rails application" name="description" />
<meta content="PingCRM" name="application-name" />
<meta content="#667eea" name="theme-color" />
<title>Vite App</title>

<%#= csrf_meta_tags %> <%#= csp_meta_tag %> <%= vite_client_tag %>

<%= vite_javascript_tag 'application' %> 


> 更改`app/frontend/entrypoints/application.js` 添加
```javascript
import '../vue3/main.js'

运行命令

$ rails s
$ vite
# 最后访问 http://127.0.0.1:3000/vue3 将看到vue页面

后端路由实现方式

依赖 gem: 

# Inertia adapter for Rails (https://github.com/inertiajs/inertia-rails)
gem 'inertia_rails'

demo: https://gitee.com/appcheck/rails-starter

参考资料